即 Asynchronous Javascript And XML基协，AJAX 不是一門的新的語言，而是對現(xiàn)有持術(shù)的綜合利用日矫。本質(zhì)是在HTTP協(xié)議的基礎(chǔ)上以異步的方式與服務(wù)器進行通信斋攀。
異步
- 指某段程序執(zhí)行時不會阻塞其它程序執(zhí)行，其表現(xiàn)形式為程序的執(zhí)行順序不依賴程序本身的書寫順序顿天，相反則為同步。
- 其優(yōu)勢在于不阻塞程序的執(zhí)行蔑担，從而提升整體執(zhí)行效率牌废。
現(xiàn)實生活中的一個例子
打電話是同步 發(fā)消息是異步
XMLHttpRequest可以以異步方式的處理程序。
XMLHttpRequest
瀏覽器內(nèi)建對象啤握，用于在后臺與服務(wù)器通信(交換數(shù)據(jù)) 鸟缕，由此我們便可實現(xiàn)對網(wǎng)頁的部分更新，而不是刷新整個頁面。
- 1懂从、下面是一個簡單的例子
見代碼示例8-1.html和8-1.php
- 2授段、同步
見代碼示例8-2.html 和 8-2.php
![Upload 11.png failed. Please try again.]
由于XMLHttpRequest本質(zhì)基于HTTP協(xié)議實現(xiàn)通信，所以結(jié)合HTTP協(xié)議和上面的例子我們分析得出如下結(jié)果
請求
- 1番甩、請求行
a) 需要有一個請求方式
b) 一個請求地址url
xhr.open('get','index.php');
- 2侵贵、請求頭
a) 設(shè)置請求頭
b) post方式請求時，必須設(shè)置
xhr.setRequestHeader('Conten-Type','application/x-www-form-urlencoded');
get方式請求可以不設(shè)置
-
3缘薛、請求主體
a) 實際上是客戶端請求的數(shù)據(jù)
b) 當以post方式請求時窍育，需要xhr.send(‘key=val&key1=val2’)的形式
c) 當以get方式請求時，參數(shù)是放在請求url上的宴胧，所以一般寫成xhr.send()或xhr.send(null);
xhr.send(null);
響應(yīng)
- HTTP響應(yīng)是由服務(wù)端發(fā)出的漱抓，作為客戶端更應(yīng)關(guān)心的是響應(yīng)的結(jié)果。
- HTTP響應(yīng)3個組成部分與XMLHttpRequest方法或?qū)傩缘膶?yīng)關(guān)系恕齐。
- 由于服務(wù)器做出響應(yīng)需要時間（比如網(wǎng)速慢等原因）乞娄，所以我們需要監(jiān)聽服務(wù)器響應(yīng)的狀態(tài)，然后才能進行處理显歧。
上圖中的onreadystatechange是Javascript的事件的一種仪或，其意義在于監(jiān)聽XMLHttpRequest的狀態(tài)
- 1、獲取狀態(tài)行（包括狀態(tài)碼&狀態(tài)信息）
xhr.status // 狀態(tài)碼
xhr.statusText //狀態(tài)信息
- 2士骤、獲取響應(yīng)頭
//獲取指定頭信息
xhr.getResponseHesder('Content-Type);
//獲取所有響應(yīng)頭信息
xhr.getAllResponseHeaders();
- 3溶其、響應(yīng)主體
xhr.responseText;
xhr.responseXML;
API詳解
xhr.open() 發(fā)起請求，可以是get敦间、post方式
xhr.setRequestHeader() 設(shè)置請求頭
xhr.send() 發(fā)送請求主體get方式使用xhr.send(null)
xhr.onreadystatechange = function () {} 監(jiān)聽響應(yīng)狀態(tài)
xhr.readyState = 0時，UNSENT open尚未調(diào)用
xhr.readyState = 1時束铭，OPENED open已調(diào)用
xhr.readyState = 2時廓块，HEADERS_RECEIVED 接收到頭信息
xhr.readyState = 3時，LOADING 接收到響應(yīng)主體
xhr.readyState = 4時契沫，DONE 響應(yīng)完成
不用記憶狀態(tài)带猴，只需要了解有狀態(tài)變化這個概念
xhr.status表示響應(yīng)碼，如200
xhr.statusText表示響應(yīng)信息懈万，如OK
xhr.getAllResponseHeaders() 獲取全部響應(yīng)頭信息
xhr.getResponseHeader('key') 獲取指定頭信息
xhr.responseText拴清、xhr.responseXML都表示響應(yīng)主體
-
注：GET和POST請求方式的差異（面試題）
- 1、GET沒有請求主體会通，使用xhr.send(null)
- 2口予、GET可以通過在請求URL上添加請求參數(shù)
- 3、POST可以通過xhr.send('name=itcast&age=10')
- 4涕侈、POST需要設(shè)置
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
- 5沪停、GET效率更好（應(yīng)用多）
- 6、GET大小限制約4K，POST則沒有限制
