一、Ajax

1.概述

AJAX (Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。

1. Ajax作用

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

2. 同步和异步

同步

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

异步

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

2.快速入门

1. 服务端实现

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

2. 客户端实现

在 < script > 标签中书写ajax代码

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);
        }
    };

3.axios

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

1. 基本使用

1.引入 axios 的 js 文件
    <script src="js/axios-0.18.0.js"></script>
2.使用axios 发送请求，并获取响应结果
    - 发送 get 请求
        axios({
            method:"get",
            url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
        }).then(function (resp){
            alert(resp.data);
        })
    - 发送 post 请求
        axios({
            method:"post",
            url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
            data:"username=zhangsan"
        }).then(function (resp){
            alert(resp.data);
        });

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

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

then() 需要传递一个匿名函数。

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

2. 快速入门(后端实现和前端实现）

1.后端实现

1. 接收请求参数
    String username = request.getParameter("username");
    System.out.println(username);
2. 响应数据
    response.getWriter().write("hello Axios~");

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请求
        //post请求， 在js中{} 表示一个js对象，而这个js对象中有三个属性
        axios({
            method:"post",
            url:"http://localhost:8080/ajax-demo/axiosServlet",
            data:"username=zhangsan"
        }).then(function (resp) {
            alert(resp.data);
        })

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请求
        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

1. JSON概述

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

1. JavaScript对象定义格式：
    {
        name:"zhangsan",
        age:23,
        city:"北京"
    }
    
2. JSON 定义格式：
    {
        "name":"zhangsan",
        "age":23,
        "city":"北京"
    }

总结：
    1.json 格式中的键要求必须使用双引号括起来
    2.js 对象中的属性名可以使用引号（可以是单引号，也可以是双引号）
    3.JSON用于作为数据载体，在网络中进行数据传输。
        JSON优点：
            1.结构层次鲜明
            2.语法格式简单

2. JSON 基础语法

1. 定义格式

JSON 本质是字符串，定义格式如下：

var 变量名 = '{"key":value,"key":value,...}';
JSON 串的键要求必须使用双引号括起来，而值根据要表示的类型确定。

value 的数据类型分为如下：

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

2. JS中的一些方法

1. js对象.属性名 的方式来获取数据。

2. JS 提供了一个对象 JSON ，该对象有如下两个方法：

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

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

注意：
1. js 提供的 JSON 对象我们只需要了解一下即可。
    因为 axios 会自动对 js 对象和 JSON 串进行想换转换。

2. 发送异步请求时，如果请求参数是 JSON 格式，那请求方式必须是 POST 。
    因为 JSON 串需要放在请求体中。

3. JSON串和Java对象的相互转换

1. Fastjson 概述

Fastjson 是阿里巴巴提供的一个Java语言编写的高性能功能完善的 JSON 库。

可以实现 Java 对象和 JSON 字符串的相互转换。

2. Fastjson 使用

1. 导入坐标
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>fastjson</artifactId>
        <version>1.2.62</version>
    </dependency>

2. Java对象转JSON
    String jsonStr = JSON.toJSONString(obj);

3.JSON字符串转Java对象
    User user = JSON.parseObject(jsonStr, User.class);

4. 后端获取数据方式

- 如果提交的数据格式是 username=zhangsan&age=23 ，后端就可以使用 request.getParameter() 方法获取
    String brandName = request.getParameter("brandName");

- 如果提交的数据格式是 json，后端就需要通过 request 对象获取输入流，再通过输入流读取数据
    // 获取请求体数据
    BufferedReader br = request.getReader();
    String params = br.readLine();
    // 将JSON字符串转为Java对象
    Brand brand = JSON.parseObject(params, Brand.class);

Ajax和JSON