目录

1、什么是AJAX

2、作用

1）与服务器通信

2）异步交互（更新局部页面）

3、AJAX 的基本工作原理

4、应用举例

5、jQuery与AJAX

6、使用jQeury实现AJAX

1）$.ajax()：发送异步请求

2）$.get()：发送get请求

3）$.post()：发送post请求

---

1、什么是AJAX

AJAX（Asynchronous JavaScript and XML）是一种创建交互式、快速动态网页应用的网页开发技术。它使用JavaScript、XML（或JSON）和XMLHttpRequest对象，可以在无需重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。

AJAX 的主要特点是异步性（客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作；同步指：浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作），这意味着它可以在不阻塞用户界面的情况下与服务器进行通信。传统的网页请求（例如通过表单提交）通常需要等待整个页面重新加载，而 AJAX 则允许只更新页面的一部分，从而提供更好的用户体验。

2、作用

1）与服务器通信

与服务器进行数据交换：通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器。

使用AJAX和服务器进行通信，达到使用 HTML+AJAX替换JSP页面：

变为：

浏览器发送请求servlet，servlet 调用业务逻辑层后将数据直接响应回给浏览器页面，页面使用 HTML 进行数据展示。 

2）异步交互（更新局部页面）

可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如用于搜索联想、用户名是否可用的校验等。

在用户名的输入框输入用户名，当输入框一失去焦点，如果用户名已经被占用就会在下方展示提示的信息。这整个过程中没有页面的刷新，只是在局部展示出了提示信息，这就是更新局部页面的效果。

3、AJAX 的基本工作原理

1. 创建 XMLHttpRequest 对象：这是 AJAX 通信的基础。这个对象允许 JavaScript 向服务器发送 HTTP 请求，并接收服务器的响应。
2. 设置请求：使用 XMLHttpRequest 对象的 open() 方法来指定请求类型（GET、POST 等）、请求的 URL 以及是否异步处理请求。
3. 发送请求：调用 XMLHttpRequest 对象的 send() 方法来发送请求。对于 POST 请求，可能需要将请求体作为参数传递给 send() 方法。
4. 处理响应：设置 XMLHttpRequest 对象的 onreadystatechange 事件处理程序来监听服务器的响应。当服务器的响应准备好时，这个事件处理程序会被触发。然后，可以通过 XMLHttpRequest 对象的 responseText 或 responseXML 属性来获取响应数据。

在Web 中，很多库和框架（如 jQuery、Axios、Fetch API 等）提供了更简洁、更强大的 AJAX 功能，可以更容易地实现 AJAX 功能。

4、应用举例

用户注册功能中，实现当用户名输入框失去焦点时，校验用户名是否在数据库已存在。

分析：

• 前端
  • 1. 给用户名输入框绑定光标失去焦点事件onblur
  • 2. 发送 ajax请求，携带username参数
  • 3. 处理响应：是否显示提示信息
• 后端
  • 1. 接收用户名
  • 2. 调用service查询User：此处不做业务逻辑处理，直接返回true
  • 3. 返回标记

创建SelectUserServlet类：

@WebServlet("/selectUserServlet")
public class SelectUserServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 接收用户名String username = request.getParameter("username");//2. 调用service查询User对象，此处不进行业务逻辑处理，直接给flag赋值true，即用户名占用boolean flag = true;//3. 响应标记response.getWriter().write("" + flag);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}

前端JavaScript部分：

//1. 给用户名输入框绑定 失去焦点事件
document.getElementById("username").onblur = function () {//2. 发送ajax请求// 获取用户名的值var username = this.value; //this ： 给谁绑定的事件，this就代表谁//2.1. 创建核心对象var xhttp;if (window.XMLHttpRequest) {xhttp = new XMLHttpRequest();} else {// code for IE6, IE5xhttp = new ActiveXObject("Microsoft.XMLHTTP");}//2.2. 发送请求xhttp.open("GET", "http://localhost:8080/ajax-demo/selectUserServlet?username="+username);xhttp.send();//2.3. 获取响应xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) { //说明已经成功响应数据//alert(this.responseText);//判断if(this.responseText == "true"){//用户名存在，显示提示信息document.getElementById("username_err").style.display = '';}else {//用户名不存在 ，清楚提示信息document.getElementById("username_err").style.display = 'none';}}};
}

5、jQuery与AJAX

jQuery对AJAX技术进行了封装和简化。AJAX功能强大，但使用起来相对复杂，涉及到XMLHttpRequest对象的创建、事件监听、状态码判断等多个步骤。而jQuery通过提供简洁易用的API，极大地简化了AJAX的开发过程。

具体来说，jQuery中的$.ajax()方法是一个功能强大的函数，它封装了XMLHttpRequest对象的创建和调用过程，并提供了丰富的配置选项和回调函数，以便开发者能够灵活地处理AJAX请求。使用$.ajax()方法，开发者可以指定请求的URL、请求类型（GET、POST等）、发送的数据、预期返回的数据类型等，并定义请求成功或失败时的回调函数。

此外，jQuery还提供了其他一些简化的AJAX函数，如$.get()、$.post()等，这些函数在内部也是基于$.ajax()方法实现的，但使用上更加简单直观，适用于常见的GET和POST请求场景。

通过使用jQuery的AJAX功能，可以更加高效地进行异步通信，实现网页的动态加载和更新，提升用户体验。同时，jQuery的跨浏览器兼容性也保证了AJAX功能在各种浏览器上的稳定运行。

6、使用jQeury实现AJAX

1）$.ajax()：发送异步请求

$.ajax({键值对});

$.ajax({url:"ajaxServlet1" , // 请求路径type:"POST" , //请求方式//data: "username=ss&age=23",//请求参数data:{"username":"ss","age":23},success:function (data) {alert(data);},//响应成功后的回调函数error:function () {alert("出错了")},//表示如果请求响应出现错误，会执行的回调函数dataType:"text"//设置接受到的响应数据的格式});

2）$.get()：发送get请求

$.get(url, [data], [callback], [type])
参数：url：请求路径  data：请求参数  callback：回调函数  type：响应结果的类型

3）$.post()：发送post请求

$.post(url, [data], [callback], [type])
参数：url：请求路径  data：请求参数  callback：回调函数  type：响应结果的类型