Ajax学习笔记 - 技术栈

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 页面的路径），也可以是绝对路径。例如：

javascript 复制代码

$.ajax({
    url: "data.php", // 相对路径，假设data.php与HTML文件在同一目录下
    // 或者
    url: "http://example.com/api/data", // 绝对路径，指向远程服务器上的资源
    //...其他参数
});

type: 用于指定请求的类型，如GET、POST等。默认值是GET。例如：

javascript 复制代码

$.ajax({
    url: "data.php",
    type: "POST",
    //...其他参数
});

**data:**这个参数用于向服务器发送数据。数据格式可以是字符串、JavaScript 对象、数组等。

javascript 复制代码

var formData = "username=John&password=123";
$.ajax({
    url: "login.php",
    type: "POST",
    data: formData,
    //...其他参数
});

也可以发送JavaScript的对象数据，例如：

javascript 复制代码

var userData = {
    username: "John",
    password: "123"
};
$.ajax({
    url: "login.php",
    type: "POST",
    data: userData,
    //...其他参数
});

dataType: 用于指定预期的服务器响应数据类型。常见的值有html、xml、json、text等。例如：

**success：**这是一个回调函数，当请求成功并且服务器返回的数据被正确接收和解析后会被调用。它接收服务器返回的数据作为参数。例如：

javascript 复制代码

$.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代码：

javascript 复制代码

<%@ 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代码：

java 复制代码

@WebServlet("/AjaxServlet")
public class AjaxSerclet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    @Override
    protected 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对象：

javascript 复制代码

var jsonString = '{"name":"John","age":30}';
var obj = JSON.parse(jsonString);  //转为JavaScript对象
console.log(obj.name); // 输出：John

将JavaScript对象转为JSON字符串：

javascript 复制代码

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字符串

java 复制代码

Person person = new Person("liSi", 18, "female");
//把java对象转换为json字符串
String json = JSON.toJSONString(person);
System.out.println(json);

JSON字符串转为JavaBean

java 复制代码

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数据：

java 复制代码

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字符串

javascript 复制代码

var json = "{\"name\":\"zhangSan\", \"age\":\"18\", \"sex\":\"male\"}";
var obj = $.parseJSON(json);
alert(person.name + ", " + person.age + ", " + person.sex);

内容不算很多，只要记住关键的json序列化，还有格式之间的转换。