AJAX:
Asynchronous JavaScript and XML。現在允許瀏覽器與服務器通信而無須刷新當前頁面的技術都被叫做Ajax.（B/S：前後端分離）
使用場景舉例：
在百度等搜索引擎打出xxs時輸入框會自動彈出相關的信息、網頁地圖放大或者縮小時並不會刷新網頁等。
原理：
使用ajax與服務器交互時，發送以及接收的信息是特殊數據格式，而非整個網頁程序，因此不需要刷新。即數據在客戶端與服務器之間獨立傳輸。服務器不再返回整個頁面，而只返回可用信息。
發送Ajax請求步驟：
1.調用open方法，代表預備發送請求。
2.如果請求類型爲POST，則需設定響應頭。
3.發送http請求指令，傳遞參數。
4.聲明請求狀態改變的回調函數，接收服務器響應信息。
readyState：表示Ajax請求的當前狀態,取值範圍如下：
0 代表未初始化。 還沒有調用 open 方法
1 代表正在加載。 open 方法已被調用，但 send 方法還沒有被調用
2 代表已加載完畢。send 已被調用。請求已經開始
3 代表交互中。
4 代表完成。響應發送完畢。（一般情況下只需判斷此狀態即可）。
status：服務器發送的響應狀態碼，常用狀態碼及其含義：
404 沒找到頁面(not found)
403 禁止訪問(forbidden)
500 內部服務器出錯(internal service error)
200 一切正常(ok)
304 沒有被修改(not modified)
注意：通過XHR.status和200比較，可以確保服務器是否已發送了一個成功的響應
json文件的內容：
"{\"user\":\"zhangsan\",\"age\":19,\"date\":\"2019-09-23T02:55:11.945Z\",\"money\":[1,2,3]}"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// js裏XMLHttpRequest類似於python裏的request、urlib
// XHR是XMLHttpRequest對象的縮寫，封裝在window對象中，封裝了發送AJAX請求、接收響應的屬性以及方法。
// 如果XMLHttpRequest對象存在，則把 xhr 的值設爲該對象的新實例。如果不存在，就去檢測 ActiveObject 的實例是否
//存在，如果答案是肯定的，則把微軟 XMLHTTP 的新實例賦給 xhr
function getXHR(){
if(window.XMLHttpRequest){
return new window.XMLHttpRequest()
}else{
// 解決微軟的特殊情況
new window.ActiveXObject('Microsoft.XMLHTTP')
}
}
//異步請求數據函數
function jsonData(){
var xhr = getXHR() //局部化,防止衝突
xhr.open('GET','data.json')
//xhr.setRequestHeader()
xhr.send(null)
xhr.onreadystatechange=function(){
if(xhr.readyState ==4 && xhr.status==200){
//得到服務器返回的jaon字符串
resp = xhr.responseText
htmlText = ''
//解析字符串爲json對象，解析兩遍是因爲JSON.parase(resp)是字符串類型
jsonObj = JSON.parse(JSON.parse(resp))
//console.log(typeof(jsonObj)) //查看類型
//組織顯示html格式
htmlText = '<tr><td>' + jsonObj.user +'</td></tr>'
document.getElementById('userData').innerHTML = htmlText
}
}
}
// function setInnerHTML(id,text){
// document.getElementById(id).innerHTML = htmlText
// }
</script>
</head>
<body>
<input type="button" value="加載" onclick="jsonData()"/>
<table>
<thead>
<tr><td>用戶名</td></tr>
</thead>
<tbody id='userData'> </tbody>
</table>
</body>
</html>