JavaWeb学习(1)（同步或异步请求、依赖jQuery简单实现Ajax技术）

目录

一、Web的基本流程与页面局部刷新。

（1）web开发时基本流程。

（2）页面的"全局刷新"与"局部刷新"。

二、Ajax技术。

（1）基本介绍。

（2）基本特点。

1、与服务器异步交互。

2、浏览器页面局部刷新。

（3）同步交互与异步交互?

1、同步交互。

2、异步交互。

三、Ajax常见应用情景。

（1）搜索框的"模糊搜索"显示。

（2）注册表单时用户名的验证："是否被注册"情景。

（3）面试提问。

1、提问。这位同学请谈下你对ajax的理解？

2、回答。

四、jQuery。

（1）基本介绍。

（2）大致功能介绍。

1、兼容性。

2、选择器。

3、事件处理。

4、动画和效果。

5、Ajax技术。

6、链式调用。

7、扩展性。

8、轻量级。

五、使用JQuery简单实现Ajax技术。

（1）为什么使用jQuery实现Ajax技术？

（2）使用jquery中的ajax()方法的实现步骤。

（3）jquery中的ajax()方法的参数详解。

（4）使用idea(2024)创建web项目测试。

1、整个项目结构。

2、ajax.jsp代码。

3、AjaxServlet类。（接收jsp页面请求）

4、tomcat配置与部署情况。

一、Web的基本流程与页面局部刷新。

（1）web开发时基本流程。
  • jsp页面——>发起请求——>servlet——>重定向或请求转发（跳转）其它页面。
（2）页面的"全局刷新"与"局部刷新"。
  • 我们都知道点击浏览器左上角"刷新"标志，就会刷新整个页面。
  • 这时客户端就会向服务器发送请求。

  • 如果需求：实现页面的部分内容的"局部刷新"。（如：验证码刷新、用户名验证等）
  • 这里就要使用到我们的Ajax技术实现局部刷新。

二、Ajax技术。

（1）基本介绍。
  • AJAX（Asynchronous JavaScript and XML）翻译中文：就是"异步Javascript和XML"。
  • 是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。它通过在后台与服务器交换数据，并更新部分网页，使得网页能够异步更新。
  • AJAX 的工作原理：是使用 JavaScript 向服务器发送异步请求，然后使用 XML 或 JSON 格式接收数据，并在客户端对这些数据进行处理。
（2）基本特点。

  • AJAX还有一个最大的特点就：当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

1、与服务器异步交互。
2、浏览器页面局部刷新。
（3）同步交互与异步交互?
1、同步交互。
  • 客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求。
  • 同步交互是指在执行操作时，必须等待该操作完成后才能进行下一步操作的过程。
  • 在同步交互中，程序的执行是顺序的，一个任务完成后，下一个任务才能开始。
  • 在电影院排队买票时，你前面的人必须完成购票后，你才能开始购票。这个过程是顺序的，不能同时进行。
2、异步交互。
  • 客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
  • 异步交互是指可以同时进行多个操作，不需要等待当前操作完成就可以开始下一个操作的过程。
  • 在异步交互中，程序可以并行执行多个任务，提高了效率和响应速度。
  • 在生活中如：洗衣机在洗衣服的同时，你可以做其他家务。比如扫地、擦桌子，不需要一直等待衣服洗完。

三、Ajax常见应用情景。

（1）搜索框的"模糊搜索"显示。

  • 当我们在百度中输入一个“白”字后，会马上出现一个下拉列表！其中列表中显示的是包含“白”字的关键字。
  • 其实这里就使用了Ajax技术！
  • 当文件框发生了输入变化时，浏览器会使用Ajax技术向服务器发送一个请求，查询包含“白”字的关键字，然后服务器会把查询到的结果响应给浏览器，最后浏览器把关键字显示在下拉列表中。
  • 整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
  • 当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！

（2）注册表单时用户名的验证："是否被注册"情景。
  • 当输入用户名后，把光标移动到其他表单项上时，浏览器会使用Ajax技术向服务器发出请求，服务器会查询名为"zhangSan"的用户是否存在。
  • 最终服务器返回"true"：表示名为"zhangSan"的用户已经存在了，浏览器在得到结果后显示"用户名已被注册"！

（3）面试提问。
1、提问。这位同学请谈下你对ajax的理解？
  • 需要回答时：首先组织语言——>再进行结构化回复 （突出逻辑性和层次结构）
  • 先说清楚：是什么 +  什么时候用（什么场景下用） + 是怎么用的（在哪里用到了）。
  • 这样就能去更好的与面试官达成"匹配度"，而不是"回去等消息"。
2、回答。
  • Ajax是用JavaScript语言跟服务器进行异步交互的技术。（首先提出：官方解答）
  • 当我们需要对页面的数据进行局部刷新的时候可以使用Ajax技术来实现。本人在xxx项目，大量使用Ajax技术。比如：网页的搜素框通过异步去请求匹配的数据，还有注册时填写表单，对表单数据的验证等等。
  • 这样就体现出它的基本概念、使用场景、如何使用。

四、jQuery。

（1）基本介绍。
  • jQuery是一个快速、小巧且功能丰富的JavaScript库。
  • 其创建目的是：简化HTML文档遍历和操作、事件处理、动画和Ajax等操作。
  • jQuery的设计宗旨是“Write Less, Do More”，即用更少的代码做更多的事情。
（2）大致功能介绍。
1、兼容性。
  • jQuery支持所有主流浏览器，包括IE6.0+、Firefox、Safari、Chrome和Opera。
2、选择器。
  • jQuery使用CSS风格的选择器来查找和操作HTML元素，这使得DOM操作变得简单直观。
3、事件处理。
  • jQuery提供了一种统一的方法来绑定事件处理器，无论在哪种浏览器上，都不需要担心兼容性问题。
4、动画和效果。
  • jQuery内置了多种动画效果，如淡入淡出、滑动等。可以很容易地给网页添加动态效果。
5、Ajax技术。
  • jQuery的Ajax功能简化了与服务器的数据交换。使得异步加载数据和更新页面部分内容变得容易。
6、链式调用。
  • jQuery的方法支持链式调用，这使得代码更加简洁和易于阅读。
7、扩展性。
  • jQuery允许开发者扩展其功能，通过编写自定义的插件来满足特定的需求。
8、轻量级。
  • 尽管功能强大，jQuery的文件大小相对较小，这有助于加快网页的加载速度。

五、使用JQuery简单实现Ajax技术。

（1）为什么使用jQuery实现Ajax技术？
  • 通过JavaScript书写ajax()方法相应的比较复杂，还要考虑到浏览器的兼容性等一系列问题。
  • 而jQuery中已经将Ajax的相关操作进行了封装。使用时只需要在合适的地方调用Ajax相关的方法即可。相比而言，JQuery实现Ajax更加简洁、方便。
（2）使用jquery中的ajax()方法的实现步骤。

（3）jquery中的ajax()方法的参数详解。

（4）使用idea(2024)创建web项目测试。
  • 后端使用：servlet-api、JavaWeb。
  • 前端使用：jsp-api、html、JavaScript等等。
1、整个项目结构。

2、ajax.jsp代码。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>ajax初识</title><%--引入jquery--%><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<button onclick="myfun()">有种点击我！</button>
<script>function myfun() {//1.使用ajax方法$.ajax({url:"http://localhost:8080/AjaxServlet",type:"GET",data:"name=Tom",dataType:"text",success:function (data){alert(data)}})}
</script>
</body>
</html>
3、AjaxServlet类。（接收jsp页面请求）
package com.fs.web;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;/*** @Title: AjaxServlet* @Author HeYouLong* @Package com.fs* @Date 2024/12/4 下午5:40* @description: AjaxServlet测试类*/
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//设置请求编码req.setCharacterEncoding("UTF-8");//设置相应编码resp.setContentType("text/html;charset=UTF-8");//拿到对应参数值String username = req.getParameter("name");resp.getWriter().write("hello！"+username);}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req,resp);}
}
4、tomcat配置与部署情况。
  • tomcat服务器。

  • 部署（配置工件）。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/33852.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

win11 vs2022 python3.9环境下运行jupyterlab

win11 vs2022 python3.9环境下运行jupyterlab

jupyter官网及简介&#xff1a;https://jupyter.org/ Jupyter 集合“浏览器 编程 文档 绘图 多媒体 发布”众多功能与一身&#xff0c;适合探究式学习。 JupyterLab是最新的基于网络的笔记本、代码和数据的互动开发环境。 Jupyter Notebook是JupyterLab的上一代版本。 由…
阅读更多...
STM32 进阶 定时器 2基本定时器 基本定时器中断案例：LED闪烁

STM32 进阶 定时器 2基本定时器 基本定时器中断案例：LED闪烁

基本定时器 基本定时器TIM6和TIM7各包含一个16位自动装载计数器&#xff0c;由各自的可编程预分频器驱动。 这2个定时器是互相独立的&#xff0c;不共享任何资源。 这个2个基本定时器只能向上计数&#xff0c;由于没有外部IO&#xff0c;所以只能计时&#xff0c;不能对外部…
阅读更多...
libaom 源码分析：帧间帧内预测编码

libaom 源码分析：帧间帧内预测编码

整体流程框架逻辑 帧间帧内预测模式的分区类型 不论是 RD 模式还是 nonRD 模式，libaom 中分区只应用 PARTITION_NONE、PARTITION_HORZ、PARTITION_VERT、PARTITION_SPLIT 四种类型，不像 AV1 标准中介绍的那样有十种类型（其实 libaom 源码中也实现了所有了类型，但在正式版中…
阅读更多...
达梦归档文件名与实例对应关系

达梦归档文件名与实例对应关系

默认的&#xff0c;达梦归档文件名比较难以看懂&#xff0c;且多实例下不好区分 靠它就行 select upper(to_char((select DB_MAGIC), xxxxxxxxxx)) mag_id; 这样就对上号了。
阅读更多...
JavaScript实现圆周运动效果

JavaScript实现圆周运动效果

在 JavaScript 中&#xff0c;可以通过 requestAnimationFrame 和数学公式来实现圆周运动效果。以下是示例代码&#xff1a; 示例代码 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewp…
阅读更多...
11.爬虫

11.爬虫

前言&#xff1a; 正则表达式的作用&#xff1a; 作用一&#xff1a;校验字符串是否满足规则 作用二&#xff1a;在一段文本中查找满足要求的内容 一.Pattern类和Matcher类&#xff1a; 1.Pattern类&#xff1a;表示正则表达式 a.因此获取Pattern对象就相当于获取正则表达式…
阅读更多...
Java项目实战II基于微信小程序的无中介租房系统（开发文档+数据库+源码）

Java项目实战II基于微信小程序的无中介租房系统（开发文档+数据库+源码）

目录 一、前言 二、技术介绍 三、系统实现 四、核心代码 五、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 一、前言 随着城市化进程的加速&#xff0c;租房市场日益繁荣&a…
阅读更多...
Linux里面实时查看项目的tomcat服务器日志文件

Linux里面实时查看项目的tomcat服务器日志文件

目录 前言 一、查看tomcat服务器日志 二、运行项目验证&#xff08;篇外&#xff09; (一)运行自己的项目 二、发送验证码测试 前言 这个可以查看在Linux系统里面部署运行项目的日志&#xff0c;日志内可以查看到运行和各种错误以及前后端交互传输的各种数据&#xff0c;…
阅读更多...
12，攻防世界simple_php

12，攻防世界simple_php

simple_php 题目来源:Cyberpeace-n3k0 题目描述: 小宁听说php是最好的语言,于是她简单学习之后写了几行php代码。 进入靶场 这段PHP代码是一个简单的web应用示例&#xff0c;让我们逐步分析这段代码&#xff1a; show_source(__FILE__);&#xff1a;这行代码会显示当前文件的…
阅读更多...
Webpack Tree Shaking 技术原理及应用实战，优化代码，精简产物

Webpack Tree Shaking 技术原理及应用实战，优化代码，精简产物

前言 在前端开发中&#xff0c;优化代码体积和提升应用性能是至关重要的课题。Webpack 提供了多种优化手段来帮助开发者实现这一目标&#xff0c;Tree Shaking 就是其中一种非常重要的优化技术&#xff0c;它通过在编译阶段移除未被使用的代码模块&#xff0c;从而显著减小最终…
阅读更多...
5G CPE核心器件-基带处理器（三）

5G CPE核心器件-基带处理器（三）

5G CPE 核心器件 -5G基带芯片 基带芯片简介基带芯片组成与结构技术特点与发展趋势5G基带芯片是5G CPE中最核心的组件，负责接入5G网络，并进行上下行数据业务传输。移动通信从1G发展到5G，终端形态产生了极大的变化，在集成度、功耗、性能等方面都取得巨大的提升。 基带芯片简…
阅读更多...
SpringBoot高级-底层原理

SpringBoot高级-底层原理

目录 1 SpringBoot自动化配置原理 01-SpringBoot2高级-starter依赖管理机制 02-SpringBoot2高级-自动化配置初体验 03-SpringBoot2高级-底层原理-Configuration配置注解 04-SpringBoot2高级-底层原理-Import注解使用1 05-SpringBoot2高级-底层原理-Import注解使用2 06-S…
阅读更多...
ES常见问题汇总

ES常见问题汇总

ES常见问题汇总 1.Es的作用&#xff08;elasticsearch&#xff09; 作用&#xff1a; elasticsearch是一款非常强大的开源搜索引擎&#xff0c;具备非常多强大功能&#xff0c;可以帮助我们从海量数据中快速找到需要的内容 ELK技术栈 elasticsearch结合kibana、Logstash&…
阅读更多...
linux环境宝塔服务部署安装及介绍

linux环境宝塔服务部署安装及介绍

一、简介 宝塔面板是一款服务器管理软件&#xff0c;支持windows和linux系统&#xff0c;可以通过Web端轻松管理服务器&#xff0c;提升运维效率。例如&#xff1a;创建管理网站、FTP、数据库&#xff0c;拥有可视化文件管理器&#xff0c;可视化软件管理器&#xff0c;可视化C…
阅读更多...
ONES 功能上新｜ONES Project 甘特图再度升级

ONES 功能上新｜ONES Project 甘特图再度升级

ONES Project 甘特图支持展示工作项标题、进度百分比、依赖关系延迟时间等信息。 应用场景&#xff1a; 在使用甘特图规划项目任务、编排项目计划时&#xff0c;可以对甘特图区域进行配置&#xff0c;展示工作项的工作项标题、进度百分比以及依赖关系延迟时间等维度&#xff0c…
阅读更多...
跨域请求限制的通俗解释

跨域请求限制的通俗解释

什么是跨域 想象一下&#xff0c;每个网站就像一个独立的小国家&#xff0c;有自己的边界&#xff08;域名&#xff09;。比如&#xff0c;https://example1.com是一个国家&#xff0c;https://example2.com是另一个国家。浏览器就像是这些国家之间的海关&#xff0c;它会检查从…
阅读更多...
javascript删除对象属性

javascript删除对象属性

1、操作符 delete object.property const obj {age: 19,name: hanmeimei, } delete obj.age2、Reflect.deleteProperty(object, propertyKey) 还会返回布尔值 const obj {age: 19,name: hanmeimei, } Reflect.deleteProperty(obj, name)
阅读更多...
Linux 查看系统资源常用命令

Linux 查看系统资源常用命令

目录 Linux 查看系统资源常用命令 一、top 二、htop 三、vmstat 四、iostat 五、mpstat 六、free 七、sar 八、ps 九、pstree 十、lsof 十一、uptime 十二、dmesg 十三、dmidecode 十四、lsblk 十五、blkid 十六、fdisk -l 十七、parted -l 十八、df -h 十…
阅读更多...
【text2sql】低资源场景下Text2SQL方法

【text2sql】低资源场景下Text2SQL方法

SFT使模型能够遵循输入指令并根据预定义模板进行思考和响应。如上图&#xff0c;、 和 是用于通知模型在推理过程中响应角色的角色标签。 后面的内容表示模型需要遵循的指令&#xff0c;而 后面的内容传达了当前用户对模型的需求。 后面的内容代表模型的预期输出&#xff0c;也…
阅读更多...
楼盘智能化的关键技术：数字孪生如何落地？

楼盘智能化的关键技术：数字孪生如何落地？

随着智慧城市的不断发展&#xff0c;数字孪生技术逐渐成为实现智慧楼盘管理和运营的核心技术之一。通过创建与现实楼盘一一对应的虚拟模型&#xff0c;数字孪生不仅能够提供更加全面、动态的楼盘信息展示&#xff0c;还能为楼盘的建设、管理和用户体验优化提供精准的数据支持和…
阅读更多...
最新文章

Copyright @ 2022~2023