Ajax = 异步 JavaScript 和XML。
Ajax是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必需重载整个网页面。

1.1 AJAX作用

1. 与服务器进行数据交换：通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器
2. 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验等等...

1.2 同步和异步

同步发送请求过程如下
异步发送请求过程如下

1.3 快速入门

1.3.1 服务端实现

在项目的创建 com.learn.web.servlet ，并在该包下创建名为 AjaxServlet 的servlet

package com.learn.web.servlet; /**
 * @author 咕咕猫
 * @version 1.0
 */

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1. 响应数据
        response.getWriter().write("hello,ajax~");

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

1.3.2 客户端实现

在 webapp 下创建名为 01-ajax-demo1.html 的页面，在该页面书写 ajax 代码

创建核心对象，不同的浏览器创建的对象是不同的

    var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

发送请求

//建立连接
xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet");
//发送请求
xhttp.send();

获取响应

    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
                //通过 this.responseText 可以获取到服务端响应的数据
                alert(this.responseText);
        }
    };

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    //1.创建核心对象
    var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    //2.发送请求
    xhttp.open("GET", "http://localhost:8080/ajax-demo//ajaxServlet");
    xhttp.send();

    //3.获取响应
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
                //通过 this.responseText 可以获取到服务端响应的数据
                alert(this.responseText);
        }
    };


</script>


</body>
</html>

1.3.3 测试

二、Axios

Axios对原生的AJAX进行封装，简化书写

2.1 基本使用

axios使用比较简单，分为两步：

1. 引入axios的 js 文件

 <script src="js/axios-0.18.0.js"></script>

2. 使用axios发送请求，并获取响应结果

发送 get 请求

    axios({
        method:"get",
        url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
    }).then(function (resp) {
        alert(resp.data);
    })

发送 post 请求

    axios({
        method:"post",
        url:"http://localhost:8080/ajax-demo/axiosServlet",
        data:"username=zhangsan"
    }).then(function (resp) {
        alert(resp.data);
    })

axios() 是用来发送异步请求的，小括号中使用 js 对象传递请求相关的参数：

method 属性：用来设置请求方式的。取值为 get 或者 post
url 属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为：url?参数名1=参数值2&参数名2=参数值2
data属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值

then() 需要传递一个匿名函数。我们将 then() 中传递的匿名函数称为 回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调的函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据

2.2 快速入门

2.2.1 后端实现

定义一个用于接受请求的servlet，代码如下

package com.learn.web.servlet; /**
 * @author 咕咕猫
 * @version 1.0
 */

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;

@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("get...");

        //1. 接受请求参数
        String username = request.getParameter("username");
        System.out.println(username);

        //2. 响应数据
        response.getWriter().write("hello,axios~");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("post...");
        this.doGet(request,response);
    }
}

2.2.2 前端实现

1. 引入 js 文件

<script src="js/axios-0.18.0.js"></script>

2. 发送 ajax 请求

get 请求

    axios({
        method:"get",
        url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
    }).then(function (resp) {
        alert(resp.data);
    })

post 请求

    axios({
        method:"post",
        url:"http://localhost:8080/ajax-demo/axiosServlet",
        data:"username=zhangsan"
    }).then(function (resp) {
        alert(resp.data);
    })

2.3 请求方法别名

为了方便起见，Axios已经为所有支持的请求方法提供了别名。如下

get 请求： axios.get(url [,config])
delete 请求： axios.delete(url [,config])
head 请求： axios.head(url [,config])
options 请求： axios.option(url [,config])
post 请求： axios.post(url [,data [,config])
put 请求： axios.put(url [,data [,config])
patch 请求： axios.patch(url [,data [,config])

上面案例中的 get 请求和 post 请求可以改为如下所示

    axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (resp) {
        alert(resp.data);
    })


    axios.post("http://localhost:8080/ajax-demo/axiosServlet","username=zhangsan").then(function (resp) {
        alert(resp.data);
    })

三、JSON

3.1 概述

概念：JavaScript Object Notation 。JavaScript 对象表示法

JSON 是一种存储和交换数据的数据格式；如果开发过程中直接用JavaScript解析XML文件的话，常常会导致复杂的代码和极低的开发效率。为此，JSON为Web应用开发者提供了另一种数据交换格式。

要把JSON文件转换成JavaScript对象。JSON最常见的用法之一是从Web服务器上读取JSON数据(作为文件或HttpRequest)，将JSON数据转换为JavaScript对象，然后在网页中使用该数据

作用：由于其语法格式简单，增此结构鲜明，先多用于作为数据载体，在网络中进行数据传输。如下图所示就是服务端给浏览器响应的数据，这个数据比较简单，如果现需要将Java对象中封装的数据响应回给浏览器的话，应该以何种数据传输？

3.2 JSON基础语法

3.2.1 定义格式

JSON 本质就是一个字符串，但是该字符串内容是有一定的格式要求的。定义格式如下：

 var 变量名 = '{"key":value,"key":value,...}';

JSON 串的键要求必须用双引号括起来，而值根据要表示的类型确定。value 的数据类型分为如下

数字（整数或浮点数）
字符串（使用双引号括起来）
逻辑值（true或者false）
数组（在方括号中）
对象（在花括号中）
null

3.2.2 代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    //定义json
    var json = {
        "name":"zhangsan",
        "age":23,
        "addr":["北京","上海","广州"]
    };

    //获取json
    alert(json.name);


</script>
</body>
</html>

如果它是一个 js 对象，我们就可以通过 js对象.属性名的方式来获取数据。JS 提供了一个对象 JSON ，该对象有如下两个方法：

parse(str) ：将 JSON串转换为 js 对象。
使用方式是： var jsObject = JSON.parse(jsonStr)；
stringify(obj) ：将 js 对象转换为 JSON 串。
使用方式是：var jsonStr = JSON.stringify(jsObject)；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    //1. 定义json
    var json = {
        "name":"zhangsan",
        "age":23,
        "addr":["北京","上海","广州"]
    };
    //获取json
    alert(json.name);


    //2. 将 JSON 字符串转为 JS 对象
    let jsObject = JSON.parse(jsonStr);
    alert(jsObject)
    alert(jsObject.name)


    //3. 将 JS 对象转换为 JSON 字符串
    let jsonStr2 = JSON.stringify(jsObject);
    alert(jsonStr2)

</script>
</body>
</html>

3.2.3 发送异步请求携带参数

3.3 JSON串和Java对象的相互转换

以后会以 json 格式的数据进行前后端交互。前端发送请求时，如果是复杂的数据就会以 json 提交给后端；而后端如果需要响应一些复杂的数据时，也需要以 json 格式将数据响应回给浏览器。

3.3.1 Fastjson 概述

Fastjson 是阿里巴巴提供的一个Java语言编写的高性能功能完善的 JSON 库，是目前Java语言中最快的 JSON 库，可以实现 Java 对象和 JSON 字符串的相互转换。

3.3.2 Fastjson使用

Fastjson 使用也是比较简单的，分为以下三步完成

1. 导入坐标

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.62</version>
        </dependency>

2. Java对象转为JSON
String jsonStr = JSON.toJSONString(obj);
将 Java 对象转换为 JSON 串，只需要使用 Fastjson 提供的 JSON 类中的 toJSONString() 静态方法即可。

3. JSON字符串转为Java对象
User user = JSON.parseObject(jsonStr, User.class);
将 json 转换为 Java 对象，只需要使用 Fastjson 提供的 JSON 类中的 parseObject() 静态方法即可。

3.3.3 代码演示

package com.learn.json;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;

/**
 * @author 咕咕猫
 * @version 1.0
 */
public class FastJsonDemo {

    public static void main(String[] args) {
        //1. 将Java对象转为JSON字符串
        User user = new User();
        user.setId(1);
        user.setUsername("zhangsan");
        user.setPassword("123");

        String s = JSON.toJSONString(user);
        System.out.println(s);//{"id":1,"password":"123","username":"zhangsan"}

        //2. 将JSON字符串转为Java对象
        User u = JSON.parseObject("{\"id\":1,\"password\":\"123\",\"username\":\"zhangsan\"}", User.class);
        System.out.println(u);


    }
}

原文链接：https://blog.csdn.net/weixin_61843013/article/details/125660157