一限煞、什么是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)行開發(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)行交互的地方雕沉，并且開始有用戶對(duì)原始表單提交會(huì)卸載頁(yè)面產(chǎn)生不滿，試想如下例子：
用戶注冊(cè)一個(gè)賬號(hào)淳衙，輸入了用戶名密碼之類的一大堆資料蘑秽，然后點(diǎn)擊提交饺著，頁(yè)面刷新箫攀，因網(wǎng)速原因等待一分鐘后，提示賬號(hào)已經(jīng)存在幼衰，請(qǐng)從新輸入靴跛，然后資料又要從新填寫；
假設(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ù)：填寫用于認(rèn)證的用戶名和密碼迹冤；

send

作用:

類比：撥打電話時(shí)讽营，填寫好電話號(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)接口