目录
一、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 { @Override protected 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); } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req,resp); } }
4、tomcat配置与部署情况。
- tomcat服务器。
- 部署(配置工件)。