前段時(shí)間，我學(xué)習(xí)了AJAX的相關(guān)基礎(chǔ)內(nèi)容，雖然其中還有許多未明白的地方，但是已經(jīng)可以進(jìn)行最基本的使用的了，所以寫(xiě)下這篇文章作為復(fù)習(xí)；
一、什么是AJAX？以及AJAX誕生緣由
什么是AJAX？
AJAX全稱是異步JS和XML（Asynchronous JavaScript And XML），它由幾種技術(shù)構(gòu)成：包括XML，DOM等；
通常的使用是利用JS向服務(wù)器發(fā)送HTTP請(qǐng)求，獲取到數(shù)據(jù)后（一般為json或者text格式），再利用DOM將數(shù)據(jù)填充進(jìn)html標(biāo)簽中；-
AJAX誕生緣由
- AJAX歷史（摘抄至阮一峰AJAX教程）
1999年，微軟公司發(fā)布IE瀏覽器5.0版，第一次引入新功能：允許JavaScript腳本向服務(wù)器發(fā)起HTTP請(qǐng)求。這個(gè)功能當(dāng)時(shí)并沒(méi)有引起注意，直到2004年Gmail發(fā)布和2005年Google Map發(fā)布，才引起廣泛重視。2005年2月，AJAX這個(gè)詞第一次正式提出，指圍繞這個(gè)功能進(jìn)行開(kāi)發(fā)的一整套做法。從此，AJAX成為腳本發(fā)起HTTP通信的代名詞，W3C也在2006年發(fā)布了它的國(guó)際標(biāo)準(zhǔn)。
- AJAX為何誕生？
在web發(fā)展的最初期，經(jīng)常使用的表單提交會(huì)默認(rèn)將頁(yè)面卸載（刷新），但當(dāng)時(shí)頁(yè)面功能不多，所以并沒(méi)有很大的影響。
但是隨著web不斷地發(fā)展，頁(yè)面功能越來(lái)越多，越來(lái)越強(qiáng)大，不只是用來(lái)瀏覽信息，更多了許多與用戶進(jìn)行交互的地方，并且開(kāi)始有用戶對(duì)原始表單提交會(huì)卸載頁(yè)面產(chǎn)生不滿，試想如下例子： - 用戶注冊(cè)一個(gè)賬號(hào)，輸入了用戶名密碼之類的一大堆資料，然后點(diǎn)擊提交，頁(yè)面刷新，因網(wǎng)速原因等待一分鐘后，提示賬號(hào)已經(jīng)存在，請(qǐng)從新輸入，然后資料又要從新填寫(xiě)；
- 假設(shè)當(dāng)時(shí)的頁(yè)面有點(diǎn)贊功能，點(diǎn)一個(gè)贊刷新整個(gè)頁(yè)面一次，點(diǎn)一個(gè)按鈕又刷新一次；
上述情況確實(shí)會(huì)讓人感到非常惱火；
于是，AJAX技術(shù)經(jīng)過(guò)一段時(shí)間的發(fā)展成熟后大規(guī)模的引用到頁(yè)面上，推動(dòng)了web行業(yè)的發(fā)展；
二、XMLHttpRequest對(duì)象
什么是XMLHttpRequest？
XMLHttpRequest是原生JS的一個(gè)內(nèi)置對(duì)象，用以通過(guò)瀏覽器向服務(wù)器發(fā)送HTTP請(qǐng)求進(jìn)行數(shù)據(jù)交互，XMLHttpRequest是AJAX技術(shù)的核心，學(xué)習(xí)AJAX實(shí)質(zhì)上就是在學(xué)習(xí)XMLHttpRequest；創(chuàng)建
XMLHttpRequest對(duì)象
一般使用new關(guān)鍵字進(jìn)行創(chuàng)建，然后賦值給一個(gè)變量，如下：
var xhr = new XMLHttpRequest();
三、XMLHttpRequest對(duì)象的屬性
- XMLHttpRequest對(duì)象的屬性有哪些？有些什么用？
| 屬性名 | 作用 |
|---|---|
| readyState | 只讀屬性，用于表示XMLHttpRequest請(qǐng)求的當(dāng)前狀態(tài)，有五個(gè)數(shù)字(0,1,2,3,4);0：表示已經(jīng)創(chuàng)建了 XMLHttpRequest對(duì)象，但是open方法還未被調(diào)用；1：表示已調(diào)用 open方法，但還未調(diào)用send方法（請(qǐng)求還未被發(fā)送出去），此時(shí)可以對(duì)請(qǐng)求的header進(jìn)行設(shè)定（setRequestHeader方法）；2： send方法已調(diào)用，數(shù)據(jù)已發(fā)送，并且服務(wù)器接收到了請(qǐng)求；3：表示服務(wù)器正在傳輸數(shù)據(jù)； 4：數(shù)據(jù)傳輸完成； 該方法一般在onreadystatechange事件中進(jìn)行查看 |
| status | 只讀屬性，表示本次請(qǐng)求的狀態(tài)，只返回一個(gè)數(shù)字，常用的有如下幾個(gè)狀態(tài)碼： 200：OK（正常訪問(wèn)）； 301：Moved Permanently（永久移動(dòng)）； 302：Moved temporarily（暫時(shí)移動(dòng)）； 304：Not Modified（未修改）； 307：Temporary Redirect（暫時(shí)重定向）； 401：Unauthorized （未授權(quán)）； 403：Forbidden（禁止訪問(wèn)）； 404：Not Found（未找到該網(wǎng)址）；500：Internal Server Error （找到網(wǎng)址但服務(wù)器發(fā)生錯(cuò)誤）； |
| statusText | 與status屬性類似，返回本次請(qǐng)求的狀態(tài)，不同點(diǎn)在于，status只返回一個(gè)數(shù)字，而該屬性返回?cái)?shù)字和狀態(tài)解析 |
| responseType | 可通過(guò)對(duì)該屬性賦值來(lái)指定接收的數(shù)據(jù)類型，默認(rèn)為字符串，有如下幾種數(shù)據(jù)類型：text：以字符串形式接收數(shù)據(jù)；json：以json對(duì)象形式接收數(shù)據(jù)；blob：blob對(duì)象；ArrayBuffer：ArrayBuffer對(duì)象； |
| response responseText responseXML |
三者都是服務(wù)器返回的數(shù)據(jù)，如果數(shù)據(jù)不完整或者獲取失敗，它們的值就為null； 不同點(diǎn)： response返回的是數(shù)據(jù)的主體部分，可以為任何類型(數(shù)組，json，XML，字符串等)； responseText返回從服務(wù)器接收到的字符串； responseXML返回從服務(wù)器接收到的Document對(duì)象，若返回的數(shù)據(jù)不能解析為XML或者HTML格式，那該屬性的值為null，該值返回的數(shù)據(jù)會(huì)被直接解析DOM； |
| timeout | 該屬性用以設(shè)置發(fā)送請(qǐng)求后多少毫秒后未接到回應(yīng)就自動(dòng)終止請(qǐng)求，0為無(wú)時(shí)間限制，默認(rèn)值為0，可通過(guò)在open方法后send方法前對(duì)其進(jìn)行賦值來(lái)制定 |
| withCredentials | 該屬性制定跨域請(qǐng)求時(shí)，個(gè)人的cookie信息是否附帶進(jìn)請(qǐng)求herder中，默認(rèn)為false（不攜帶cookie），可通過(guò)對(duì)其進(jìn)行賦值來(lái)制定 |
四、XMLHttpRequest對(duì)象的方法
| 方法名 | 作用 |
|---|---|
| open | 類比：撥打電話時(shí)的撥號(hào)行為，確定撥打（連接）的目標(biāo)；open方法用以設(shè)置請(qǐng)求的參數(shù)，常用的有三個(gè)參數(shù)：第一個(gè)參數(shù)：請(qǐng)求的類型（常用 get或者post）；第二個(gè)參數(shù)是接口名和：這里要分兩種情況： get請(qǐng)求時(shí)：接口名+請(qǐng)求參數(shù)（鍵值對(duì)形式）；post請(qǐng)求時(shí)：只需要接口名；第三個(gè)參數(shù)：一個(gè)布爾值，指定是否異步（true為異步，false為同步，通常為true，默認(rèn)為true）； 第四和第五個(gè)參數(shù)：填寫(xiě)用于認(rèn)證的用戶名和密碼； |
| send | 類比：撥打電話時(shí)，填寫(xiě)好電話號(hào)碼后按撥打鍵（發(fā)送請(qǐng)求）；send方法用以發(fā)送HTTP請(qǐng)求，需要在open方法調(diào)用后調(diào)用；參數(shù)分兩種形式： get：get請(qǐng)求時(shí)無(wú)參數(shù)；post：post請(qǐng)求時(shí)參數(shù)為請(qǐng)求參數(shù)（鍵值對(duì)形式） |
| setRequestHeader | 類比：填好電話號(hào)碼后，想好是用人工接聽(tīng)還是機(jī)器人接聽(tīng)，再撥打電話（這個(gè)比喻不是很恰當(dāng)）；setRequestHeader方法用以設(shè)置請(qǐng)求的header部分，用以指定數(shù)據(jù)發(fā)送的格式，調(diào)用必須在open方法后，send方法前；常用實(shí)例： setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
|
| abort | 類比：撥打電話后把電話給掛了；abort方法用以中斷已經(jīng)發(fā)出的AJAX請(qǐng)求；可以用這個(gè)方法來(lái)防止用戶重復(fù)點(diǎn)擊造成的發(fā)送重復(fù)請(qǐng)求的問(wèn)題； |
getResponseHeader和getAllResponseHeaders
|
類比：打印我的通話清單（getResponseHeader為通話清單的指定信息，getAllResponseHeaders為通話清單的所有信息）；getResponseHeader和getAllResponseHeaders之間的不同點(diǎn)：getResponseHeader接收一個(gè)參數(shù)，該參數(shù)為需要返回的回應(yīng)頭部信息；getAllResponseHeader無(wú)需參數(shù)，返回所有的回應(yīng)頭信息； |
| overrideMimeType | 用以將從服務(wù)器轉(zhuǎn)換回來(lái)的二進(jìn)制信息轉(zhuǎn)換為文本信息，該方法已被responseText屬性代替 |
五、XMLHttpRequest對(duì)象的事件以及對(duì)應(yīng)的事件監(jiān)聽(tīng)接口
| 事件名 | 接口名 | 作用 |
|---|---|---|
| readyStateChange（請(qǐng)求狀態(tài)改變事件） | onreadystatechange | 當(dāng)readyState屬性的值發(fā)生變化時(shí)，就會(huì)觸發(fā)readyStateChange，可以對(duì)onreadystatechange指定函數(shù)來(lái)監(jiān)控readyState的值； 注：通常來(lái)說(shuō)，一次交互中，readyState的值會(huì)發(fā)生五次變化，也就是說(shuō)會(huì)觸發(fā)五次readyStateChange事件 |
| abort（請(qǐng)求被中斷事件） | onabort | 通過(guò)onabort事件接口，可指定當(dāng)請(qǐng)求被中斷時(shí)的具體措施 |
| error（請(qǐng)求發(fā)生錯(cuò)誤事件） | onerror | 通過(guò)onerror事件接口，可指定當(dāng)請(qǐng)求出錯(cuò)時(shí)的具體措施 |
| load（請(qǐng)求完成，數(shù)據(jù)傳輸完畢事件） | onload | 通過(guò)onload事件接口，可指定當(dāng)數(shù)據(jù)傳輸完畢的具體措施 |
| loadend（請(qǐng)求已完成事件） | onloaded | abort、error和load這三個(gè)事件的觸發(fā)都會(huì)另外觸發(fā)loadend事件，表示請(qǐng)求已完成，但成功與否未知 |
| 對(duì)應(yīng)屬性timeout | ontimeout | 可通過(guò)ontimeout接口指定當(dāng)用戶請(qǐng)求超時(shí)的措施 |
| progress（文件上傳事件） | onprogress | 可通過(guò)對(duì)onprogress接口指定措施來(lái)監(jiān)控文件上傳的進(jìn)度 |
