Ajax

一、原生Ajax

（1）创建 XMLHttpRequest 对象

（2）创建一个新的 HTTP 请求

（3）设置响应 HTTP 请求状态变化的函数

（4）发送HTTP请求

（5）获取异步调用返回的数据

（6）使用JavaScript 和 DOM 实现局部刷新

responseText 解析纯文本  json 将文本转化成json

var data=JSON.parse(request.responseText);

 1 window.onload = function () {
 2             // 1) 创建 XMLHttpRequest 对象, 也就是创建一个异步调用对象
 3             var request = new XMLHttpRequest();
 4             // 2) 创建一个新的 HTTP 请求, 并指定该 HTTP 请求的方法、URL 及验证信息
 5             request.open("get", "./00data.json");
 6             // 3) 设置响应 HTTP 请求状态变化的函数
 7             request.onreadystatechange = function () {
 8                 if ( request.status===200 && request.readyState===4) {
 9                     //responseText 解析纯文本  json
10                     // console.log(request.responseText)
11                     // console.log(request.responseXML)
12                     // 5) 获取异步调用返回的数据
13                     // 将文本转化成json
14                     var data=JSON.parse(request.responseText);
15                     console.log(data);
16                     // 6) 使用 JavaScript 和 DOM 实现局部刷新
17                     if (data.status===200) {
18                         var cls=data.data;
19                         document.querySelector("h1").innerText=cls.name;
20                     }else{
21                         console.log(data.msg);
22                     }
23                 }
24             }
25             // 4) 发送 HTTP 请求
26             request.send();
27         }

二、简易方法

url:待载入页面的URL地址 data:请求参数 contentType:请求格式  参数的格式 success：请求之后调用

1 success:function(data){
2     console.log(data);
3      }
4 }）

error：请求发生错误时执行函数

1 error:function(res){
2                     console.log(res);
3                 }
4             })

完整代码

// url [data] success [dataType]
            $.get("./00data.json",function(data){
                if (data.status===200) {
                        var cls=data.data;
                        $("legend").text(cls.name);
                        // legend  组合表单中的相关元素
                        var students=cls.student;
                        for (let index = 0; index < students.length; index++) {
                            const stu = students[index];
                            $(".data tbody").append(""+stu.id+""+stu.name+"")
                        }
                    }else{
                        console.log(data.msg);
                    }
            })

HTML部分

 1 <table class="data">
 2         
 3         <legend>legend>
 4         <thead>
 5             <th>idth>
 6             <th>nameth>
 7         thead>
 8         <tbody>
 9 
10         tbody>
11     table>

 JSON文件

 1 {
 2     "status": 200,
 3     "data": {
 4         "name": "Web211001",
 5         "student": [
 6             {
 7                 "id": 10001,
 8                 "name": "张三"
 9             },
10             {
11                 "id": 10002,
12                 "name": "李四"
13             },
14             {
15                 "id": 10003,
16                 "name": "王五"
17             }
18         ]
19     },
20     "msg": "错误信息"
21 }