【AJAX】—— Asynchronous JavaScript And XML

【概述】

异步的 JavaScript 和 XML

【作用】

1、与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据

• 使用了AJAX和服务器进行通信，就可以使用 HTML+AJAX来替换JSP页面了

2、异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验，等等

【官网】

w3school 在线教程

【使用】

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

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

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

3、向服务器发送请求

//发送请求
    xhttp.open("GET", "http://localhost:8080/AJAX/ajaxServlet", true);
    xhttp.send();

4、获取服务器响应数据

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

【Axios异步框架】

【概述】

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

【官网】

Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js (axios-http.cn)

【使用】

1、引入axios的js文件

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

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

//get方式
<script>
    axios({
        method: "get",
        url: "http://localhost:8080/AJAX/axiosServlet?username=zhangsan",
    }).then(function (resp) {
        alert(resp.data)
    })
script>

//post方式
<script>
axios({
    method:"post",
    url:"http://localhost:8080/AJAX/axiosServlet",
    data:"username=zhangsan"
}).then(function (resp){
    alert(resp.data)
})
script>

【Axios请求方式别名】

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

 例：

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

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

【JSON】—— JavaScript Object Notation

【概述】

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

【基础语法】

【数据类型】

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

【定义】

var 变量名 = ‘’{"key1": value1,"key2": value2,...};

例：

    //定义字符串
    var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}';

【JSON字符串转为JS对象】

    //将JSON字符串转换为js对象
    let jsObject = JSON.parse(jsonStr);

【JS对象转为JSON字符串】

    //将js对象转换为json字符串
    let jsonStr = JSON.stringify(jsObject);

【JSON数据和Java对象相互转换】

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

【Fastjson】

【概述】

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

【使用】

1、导入坐标

    
    <dependency>
      <groupId>com.alibabagroupId>
      <artifactId>fastjsonartifactId>
      <version>1.2.62version>
    dependency>

2、Java对象转JSON

String jsonStr = JSON.toJSONString(obj);

3、JSON字符串转Java对象

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

例：

    public static void main(String[] args) {
        //将Java对象转为JSON
        User user=new User();
        user.setId(1);
        user.setUsername("zhangsan");
        user.setPassword("123");
        String jsonString= JSON.toJSONString(user);
        System.out.println(jsonString);
        //将JSON转为Java对象
        User u=JSON.parseObject("{\"id\":1,\"password\":\"123\",\"username\":\"zhangsan\"}",User.class);
        System.out.println(u);
    }