AJAX介绍和快速入门、什么是异步什么是同步、Axios异步框架、JSON语法介绍，以及JSON数据与Java对象之间的转换

AJAX

• 概念：AJAX（Asynchronous JavaScript And XML）:异步的JavaScript和XML
• 作用：
  • 与服务器进行数据交换：通过AJAX可以给服务器发送请求，并且获取服务器响应数据
  • 使用了AJAX和服务器进行通信，就可以使用HTML+AJAX来替换JSP页面
  • 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。

异步和同步：

知道了局部刷新后，接下来我们再聊聊同步和异步:

• 同步发送请求过程如下
  

​ 浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。

• 异步发送请求过程如下
  

  浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。

快速入门

1. 编写AjaxServlet，并使用response输出字符串

2. 创建XMLHttpRequest对象：用于和服务器交换数据

   // 创建 XMLHttpRequest 对象
   const xhttp = new XMLHttpRequest();
   

3. 向服务器发生请求

   //参数1：请求方式
   //参数2：请求连接
   //参数3：true异步 false同步（默认为true）
   xhttp.open("GET", "ajax_info.txt", true);
   xhttp.send();
   

4. 获取服务器响应数据

   //获取响应
   xhttp.onreadystatechange = function () {
       if (this.readyState == 4 && this.status == 200) {
           alert(this.responseText);
       }
   };
   

Axios异步框架

• Axios对原生的AJAX进行封装，简化书写
• 官网：https://www.axios-http.cn

快速入门：

1. 引入sxios的js文件

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

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

   //GET请求
    axios({
        method: "GET",
        url: "http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
    }).then(function (rs) {
        alert(rs.data)
    })
   //POST请求
   axios({
       method: "POST",
       url: "http://localhost:8080/ajax-demo/axiosServlet",
       data:"username=zhangsan"
   }).then(function (rs) {
       alert(rs.data)
   })
   

Axios请求方式别名

为了方便起见， 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 请求。

入门案例中的 get 请求代码可以改为如下：

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

入门案例中的 post 请求代码可以改为如下：

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

JSON

• 概念：JavaScript Object Notation。JavaScript对象表示法
• 由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输

JSON基础语法

• 定义：

  var 变量名=｛"key1":value1,
  			"key2":value2,
  			...｝
  

• value的数据类型为：

  • 数字（整数或浮点数）

  • 字符串（在双引号中）

  • 逻辑值（true或false）

  • 数组（在方括号中）

  • 对象（在花括号中）

  • null

• 获取数据

  变量名.key
  

JSON数据和Java对象转换

• 请求数据：JSON字符串转为Java对象
• 响应数据：Java对象转为JSON字符串

JSON字符串转为Java对象：

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

• 使用

  • 导入坐标

    <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>fastjson</artifactId>
        <version>1.2.83</version>
    </dependency>
    

  • Java对象转JSON

    String jsonStr=JSON.toJSONString(obj);
    

  • JSON字符串转Java对象

    User user = JSON.parseObject(jsonStr,User.class);