目录
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 的基本工作原理
- 创建 XMLHttpRequest 对象：这是 AJAX 通信的基础。这个对象允许 JavaScript 向服务器发送 HTTP 请求，并接收服务器的响应。
- 设置请求：使用 XMLHttpRequest 对象的 open() 方法来指定请求类型（GET、POST 等）、请求的 URL 以及是否异步处理请求。
- 发送请求：调用 XMLHttpRequest 对象的 send() 方法来发送请求。对于 POST 请求，可能需要将请求体作为参数传递给 send() 方法。
- 处理响应：设置 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 {
@Override
protected 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);
}
@Override
protected 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, IE5
xhttp = 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：响应结果的类型
