    //创建核心对象
    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(url)	发起Get请求
post(url,请求参数)	发起Post请求

例：

    //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、导入坐标

    <!--fastjson-->
    <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);

例：

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

【JAVA】AJAX&JSON

【AJAX】—— Asynchronous JavaScript And XML

【使用】

【Axios异步框架】

【使用】

【Axios请求方式别名】

【JSON】—— JavaScript Object Notation

【基础语法】

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

【Fastjson】

猜你喜欢