1. Ajax的概述
Ajax（Asynchronous JavaScript and XML），即异步 JavaScript 和 XML。Ajax 是一种基于 JavaScript 的技术，通过XMLHttpRequest对象或者更方便的 JavaScript 库（如 jQuery 的$.ajax()方法）来实现。它是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新，而不需要重新加载整个页面。
2. Ajax应用场景
2.1 表单数据验证
场景描述：在用户填写表单（如注册表单、登录表单等）时，实时验证用户输入的数据是否符合要求。例如，验证用户名是否已被占用、密码强度是否足够、电子邮件地址格式是否正确等，同时不会刷新整个页面。
2.2 自动完成功能
场景类型：例如在搜索框中，当用户输入关键字时，自动显示与输入内容相关的建议列表。例如，搜索引擎的搜索框、电商网站的商品搜索框等。
2.2 实时更新数据
场景描述：在金融网站上实时更新股票价格，或者在体育赛事直播网站上实时更新比赛比分。用户无需刷新页面就能看到最新的数据。
这是主要使用的几个应用场景，其他的不一一介绍。
3. Ajax的使用
既然我们知道了Ajax是干什么用的，那么，我们该如何掌握Ajax的使用？
3.1 使用Ajax的准备工作
1、引入JQuery文件
选择地址在中国的jQuery镜像，例如阿里巴巴镜像站，在需要的jsp文件下的头标签中引入jQuery，例如：
2、编写Ajax的$.ajax()方法
$.ajax()方法有很多参数，最重要的参数有，url , type , data , dataType , success 等。
url：这是一个必需的参数，用于指定请求的服务器端资源的 URL 地址。它可以是相对路径（相对于当前 HTML 页面的路径），也可以是绝对路径。例如：
$.ajax({url: "data.php", // 相对路径，假设data.php与HTML文件在同一目录下// 或者url: "http://example.com/api/data", // 绝对路径，指向远程服务器上的资源//...其他参数
});type: 用于指定请求的类型，如GET、POST等。默认值是GET。例如：
$.ajax({url: "data.php",type: "POST",//...其他参数
});data: 这个参数用于向服务器发送数据。数据格式可以是字符串、JavaScript 对象、数组等。
var formData = "username=John&password=123";
$.ajax({url: "login.php",type: "POST",data: formData,//...其他参数
});也可以发送JavaScript的对象数据，例如：
var userData = {username: "John",password: "123"
};
$.ajax({url: "login.php",type: "POST",data: userData,//...其他参数
});dataType: 用于指定预期的服务器响应数据类型。常见的值有html、xml、json、text等。例如：
success：这是一个回调函数，当请求成功并且服务器返回的数据被正确接收和解析后会被调用。它接收服务器返回的数据作为参数。例如：
$.ajax({url: "data.php",type: "GET",dataType: "json",success: function(response) {// 假设服务器返回JSON数据，这里response会自动被解析为JavaScript对象console.log(response.name); },//...其他参数
});注意！！！这里的类型是指期望 Servlet 传递数据到 jsp 的数据类型，并不是指data的数据类型。
3.2 完整的Ajax代码
使用方法讲完后，接下来我们实操一下，首先是实操内容是，当用户注册用户时，在输入框输入内容后鼠标指针点击其他地方，会自动将数据传输到服务器并进行验证。 例如：
jsp代码：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body><label>用户名：</label><input type="text" class="input" onblur="myfun()" >
</body>
<script>function myfun() {const username = document.querySelector(".input").value;$.ajax({url:"http://localhost:8080/AjaxServlet",type:"get",data:"username="+username,dataType:"text",success:function (data) {alert(data);}})}
</script>
</html>Servlet代码：
@WebServlet("/AjaxServlet")
public class AjaxSerclet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req,resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//设置编码req.setCharacterEncoding("utf-8");resp.setContentType("text/html;charset=utf-8");//获取参数String name = req.getParameter("username");UserService userService = new UserServiceImpl(); User user = userService.findUserByName(name); //操作数据库等一系列操作System.out.println(user);if (Objects.nonNull(user)){resp.getWriter().write("你好 "+name);}else {resp.getWriter().write("用户不存在");}}
}部署到Tomcat服务器上，并运行：
在输入框中输入用户名，可以看到我这边是没有任何按钮的，我在输入框外点击了一下，就弹出了“用户不存在”的错误提示！
4. Ajax的优缺点
优点：
-
AJAX使用Javascript技术向服务器发送异步请求；
-
AJAX无须刷新整个页面；
-
因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；
缺点：
-
AJAX并不适合所有场景，很多时候还是要使用同步交互；
-
AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
-
因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；
同步交互我们都知道，指的是客户端向服务器发起第一次请求，在服务器没有响应这个请求时，客户端不能发起第二次请求。异步交互是指，客户端再次发起请求时，无须服务器响应请求，可以一直请求。
4. JSON
4.1 JSON的概述
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它易于人阅读和编写，同时也易于机器解析和生成。JSON 基于 JavaScript 的对象字面量语法，但它是独立于语言的，可以在多种编程语言中使用。
JSON是用字符串来表示Javascript对象，例如可以在Servlet中发送一个JSON格式的字符串给客户端Javascript，Javascript可以执行这个字符串，得到一个Javascript对象。
4.2 JSON的语法
JSON 语法：
- 数据在名称/值对中
- 数据由逗号分隔
- 花括号保存对象
- 方括号保存数组
4.3 JSON字符串与JavaScript类型转换
在jsp页面中：
将JSON字符串转为JavaScript对象：
var jsonString = '{"name":"John","age":30}';
var obj = JSON.parse(jsonString); //转为JavaScript对象
console.log(obj.name); // 输出：John将JavaScript对象转为JSON字符串：
var obj = { name: 'John', age: 30 };
var jsonString = JSON.stringify(obj);
console.log(jsonString); // 输出：{"name":"John","age":30}觉得不好记的，可以吧stringify拆开来看string ify转为JSON字符串。
在Java中：我们需要引入fastjson包，是阿里巴巴的开源JSON解析库，它可以解析JSON格式的字符串，支持将Java Bean序列化为JSON字符串，也可以从JSON字符串反序列化到JavaBean
fastjson包的使用主要是三个对象：
-
JSON
-
JSONObject
-
JSONArray
JSONArray和JSONObject继承JSON
JSON对象
JSON这个类主要用于转换：
-
将Java对象序列化为JSON字符串
-
将JSON字符串反序列化为Java对象
所以，有三个方法我们用得特别多：
T parseObject(String text, Class<T> clazz) //把json转换为一个java对象
JSONObject parseObject(String text) // 把json转换为一个JSONObject对象
List<T> parseArray(String text, Class<T> clazz) //把json转换为一个List集合
JSONArray parseArray(String text) //把json转换为一个JSONArray对象
String toJSONString(Object object) //把一个java对象转换为json格式的字符串
JSONObject
JSON对象(JSONObject)中的数据都是以key-value形式出现，所以它实现了Map接口：
使用起来也很简单，跟使用Map就没多大的区别（因为它底层实际上就是操作Map）。
JSONArray
JSONArray则是JSON数组，JSON数组对象中存储的是一个个JSON对象，所以类中的方法主要用于直接操作JSON对象
JavaBean转为JSON字符串
Person person = new Person("liSi", 18, "female");
//把java对象转换为json字符串
String json = JSON.toJSONString(person);
System.out.println(json);JSON字符串转为JavaBean
import com.alibaba.fastjson.JSON;
public class FastJsonDeserializationExample {public static void main(String[] args) {String jsonString = "{\"name\":\"John\",\"age\":30}";User user = JSON.parseObject(jsonString, User.class);System.out.println("Name: " + user.getName() + ", Age: " + user.getAge());}
}数据过多时，也可以使用IO流处理JSON数据：
import com.fasterxml.jackson.databind.ObjectMapper;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
public class JsonIOExample {public static void main(String[] args) {try {File file = new File("data.json");InputStream inputStream = new FileInputStream(file);// 读取字节数据到字节数组byte[] buffer = new byte[(int) file.length()];inputStream.read(buffer);inputStream.close();// 将字节数组转换为字符串String jsonString = new String(buffer);ObjectMapper objectMapper = new ObjectMapper();// 假设JSON数据是一个User对象，这里将其解析为User对象User user = objectMapper.readValue(jsonString, User.class);System.out.println("Name: " + user.getName());} catch (IOException e) {e.printStackTrace();}}
}Js解析服务器发送过来的JSON字符串
var json = "{\"name\":\"zhangSan\", \"age\":\"18\", \"sex\":\"male\"}";
var obj = $.parseJSON(json);
alert(person.name + ", " + person.age + ", " + person.sex);内容不算很多，只要记住关键的json序列化，还有格式之间的转换。