ajax請求，首先需要服務器（首先你需要node）
npm i -g http-server
其次，進入當前目錄（默認服務器端口8080）
http-server
點擊進入：localhost:8080/apply-ajax.html
apply-ajax.html
（推薦封裝ajax，以及ajax轉碼過來或者轉碼回去后台）
1 <!doctype html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <title>Document</title>
7 <meta name="keywords" content="">
8 <meta name="description" content="">
9 <style>
10 * {
11 margin: 0;
12 padding: 0;
13 list-style: none;
14 }
15 </style>
16 </head>
17
18 <body>
19 <button id="btn">請求數據</button>
20 <ul id="list"></ul>
21 <script>
22 var btn = document.getElementById('btn'); 23 var list = document.getElementById('list'); 24 btn.onclick = function() { 25 // 1.創建XMLHttpRequest對象
26 var xhr = null; 27 if (window.XMLHttpRequest) { // 非IE5/6
28 xhr = new XMLHttpRequest(); //實例對象
29 } else { // IE5/6
30 xhr = new ActiveXObject('Microsoft.XMLHTTP'); 31 }; 32 // 2.打開與服務器的鏈接
33 xhr.open('get', 'test.json?_=' + new Date().getTime(), true); //生成不一樣的url解決緩存問題
34 // 3.發送給服務器
35 xhr.send(null); //get請求
36 // 4.響應就緒
37 xhr.onreadystatechange = function() { 38 if (xhr.readyState == 4) { //請求完成
39 if (xhr.status == 200) { //ok
40 var json = JSON.parse(xhr.responseText); //解析成json對象
41 for (var i = 0; i < json.length; i++) { 42 list.innerHTML += '<li>姓名:' + json[i].name + '， 性別:' + json[i].sex + '， 年齡:' + json[i].age + '， 成績:' + json[i].score + '</li>'; 43 }; 44 } else { 45 alert(xhr.status); 46 }; 47 }; 48 } 49 } 50 </script>
51 </body>
52
53 </html>
test.json（前台可以先做json對象數組測試，待數據一到調入接口即可）
1 [ 2 { "name": "\u8001\u738b", "sex": "女", "age": 19, "score": 66 }, 3 { "name": "老劉", "sex": "男", "age": 22, "score": 72 }, 4 { "name": "老李", "sex": "女", "age": 24, "score": 85 }, 5 { "name": "老張", "sex": "男", "age": 30, "score": 96 } 6 ]