Javascript Ajax 原理
什麼是 AJAX
AJAX(Asynchronous JavaScript and XML) 異步Javascript 和 XML
AJAX 是指一種建立動态網頁的開發技術
說白話點：
AJAX 就是允許JS和背景伺服器進行資料互動
AJAX 的原生實作
任何AJAX庫或者架構，都是基于原生的AJAX實作的在這裡我們先忽略相容性問題 ActiveXObject
原生的AJAX實作有四步：
第一步
建立XMLHttpRequest，就可以通過這個對象和伺服器進行互動了IE舊版本1var xh = new ActiveXObject('Microsoft.XMLHTTP');
W3C标準實作1var xhr = new XMLHttpRequest();
第二步
通過 XMLHttpRequest對象的 open方法初始化請求
XMLHttpRequest.open(method, url, async, use, password)method，要使用的HTTP方法，如 GET、POST、PUT 等
url 發送請求的url
asyc [可選] 預設為true表示異步操作，false則為同步操作
user [可選] 預設為null 可選的使用者名用于認證
password [可選] 預設為null 可選的密碼用于認證1xh.open('GET', 'https://www.baidu.com');
第三步
onreadystatechange 監聽請求變化過程
XMLHttpRequest.onreadystatechange = function(){}
隻要readyState屬性變化的時候，就會調用回調處理函數當請求被 abort() 的時候，事件就不會被觸發，事件處理函數也不會被調用1
2
3xhr.onreadystatechange = function (){
// do something when readyState change
};
第四步
正式發送出HTTP請求
XMLHttpRequest.send(DataBuffer)
對于異步請求，這個函數執行後會立馬傳回
對于同步請求，這個函數會等待請求傳回後才傳回
函數接收一個參數，表示要發送的資料1xhr.send('Helloworld');
總結
我們來看完整的AJAX原理步驟1
2
3
4
5
6
7var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.shuipingguo.com/2h4g/getvideo/search?kw=%E5%80%9A%E5%A4%A9', true);
xhr.onreadystatechange = function(xhr){
console.log(JSON.parse(xhr.target.response));
};
xhr.send();
在浏覽器控制台上執行結果：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18data: [
{
author: ""
country: 0
id: 56
img: "http://puui.qpic.cn/qqvideo_ori/0/p0859dffl2v_496_280/0"
imgv: "//puui.qpic.cn/vcover_vt_pic/0/ha7r9z89i9d234y1553076483/220"
max: 50
name: "倚天屠龍記"
number: 50
score: 8
summary: ""
type: 2
url: "//m.v.qq.com/x/cover/h/ha7r9z89i9d234y.html"
vip: 10
},
]
retcode: 0