什么是Ajax（Ajax的來(lái)歷匈挖、運(yùn)行原理碾牌、優(yōu)缺點(diǎn)及其它）

大家好，我是IT修真院深圳分院第3期的學(xué)員儡循，一枚正直純潔善良的前端程序員舶吗，今天給大家分享一下，修真院官網(wǎng)前端工程師深度思考中的知識(shí)點(diǎn)——什么是Ajax

一.背景介紹


Ajax的來(lái)歷

套用一句不恰當(dāng)?shù)脑捲裣ィ珹jax就是中間商（并不賺取差價(jià)）誓琼，換一個(gè)專業(yè)點(diǎn)的說(shuō)話，現(xiàn)在它就是腳本發(fā)起HTTP通信的代名詞

具體什么是Ajax呢肴捉？我們?cè)谡f(shuō)這個(gè)問題之前腹侣，需要思考一個(gè)問題：當(dāng)我們上網(wǎng)的時(shí)候，我們到底在上什么齿穗？

大部分人都是在上瀏覽器傲隶。

當(dāng)我們?cè)跒g覽器地址欄鍵入一個(gè)網(wǎng)址，或者通過網(wǎng)頁(yè)表單向服務(wù)器提交內(nèi)容的時(shí)候,我們就開始與瀏覽器進(jìn)行交互窃页。而瀏覽器在這個(gè)時(shí)候跺株，開始與服務(wù)器進(jìn)行交互。

傳統(tǒng)的Web應(yīng)用交互由用戶觸發(fā)一個(gè)HTTP請(qǐng)求到服務(wù)器,服務(wù)器對(duì)其進(jìn)行處理后再返回一個(gè)新的HTML頁(yè)到客戶端脖卖。

每當(dāng)服務(wù)器處理客戶端提交的請(qǐng)求時(shí),客戶都只能空閑等待,并且哪怕只是一次很小的交互乒省、只需從服務(wù)器端得到很簡(jiǎn)單的一個(gè)數(shù)據(jù)

都要返回一個(gè)完整的HTML頁(yè),而客戶端每次都要浪費(fèi)時(shí)間和帶寬去重新讀取整個(gè)頁(yè)面。

1999年胚嘲，微軟公司發(fā)布IE瀏覽器5.0版作儿，第一次引入新功能：允許JavaScript腳本向服務(wù)器發(fā)起HTTP請(qǐng)求。這個(gè)功能當(dāng)時(shí)并沒有引起注意,為什么馋劈？

實(shí)際上攻锰，人們一直在尋求改善傳統(tǒng)的web應(yīng)用交互方式。1999年以前妓雾，JS可以通過Java applet或Flash電影等中間層向服務(wù)器發(fā)送請(qǐng)求娶吞。

在Ajax被提出之前，這種技術(shù)就已經(jīng)存在很長(zhǎng)時(shí)間了械姻，那時(shí)候人們通常將這種技術(shù)叫做遠(yuǎn)程腳本(remote scripting)

Ajax技術(shù)的核心是XMLHttpRequest（簡(jiǎn)稱XHR）妒蛇，這是由微軟首先引入的一個(gè)特性，最早應(yīng)用在它的IE5瀏覽器上楷拳。

在IE5中绣夺，XHR對(duì)象是通過MSXML庫(kù)中的一個(gè)ActiveX對(duì)象實(shí)現(xiàn)的，而IE7+及其他標(biāo)準(zhǔn)瀏覽器都支持原生的XHR對(duì)象

在XHR出現(xiàn)之前欢揖，Ajax式的通信必須借助一些hack首選來(lái)實(shí)現(xiàn)陶耍，大多數(shù)使用隱藏或內(nèi)嵌的框架來(lái)。

在XHR出現(xiàn)之后她混，XHR為向?yàn)g覽器發(fā)送請(qǐng)求和解析服務(wù)器響應(yīng)提供了流暢的接口烈钞。

隨著XHR泊碑、JS等各項(xiàng)技術(shù)應(yīng)用得越來(lái)越廣泛，2005年毯欣，依賴XHR的Ajax技術(shù)被提出



瀏覽器與服務(wù)器交互圖例



二.知識(shí)剖析

1馒过、運(yùn)行機(jī)制

2、代碼示例

3酗钞、優(yōu)缺點(diǎn)

1腹忽、運(yùn)行機(jī)制

先看一下Ajax的英文翻譯

AJAX stands for Asynchronous JavaScript and XML.

AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and Java Script.

AJAX is based on the following open standards:

Browser-based presentation using HTML and Cascading Style Sheets (CSS).

Data is stored in XML format and fetched from the server.

Behind-the-scenes data fetches using XMLHttpRequest objects in the browser.

JavaScript to make everything happen.

從上可以看出Ajax依賴CSS/HTML/Javascript，而其中最核心的依賴是瀏覽器提供的XMLHttpRequest簡(jiǎn)稱（XHR）對(duì)象算吩，是這個(gè)對(duì)象使得瀏覽器可以發(fā)出HTTP請(qǐng)求與接收HTTP

響應(yīng)留凭。

W3C形象的稱XHR對(duì)象是開發(fā)者的夢(mèng)想

Ajax的工作原理相當(dāng)于在用戶和服務(wù)器之間加了—個(gè)中間層(AJAX引擎),使用戶操作與服務(wù)器響應(yīng)異步化。

并不是所有的用戶請(qǐng)求都提交給服務(wù)器,像—些數(shù)據(jù)驗(yàn)證和數(shù)據(jù)處理等都交給Ajax引擎自己來(lái)做, 只有確定需要從服務(wù)器讀取新數(shù)據(jù)時(shí)再由Ajax引擎代為向服務(wù)器提交請(qǐng)求偎巢。

Ajax就這樣集齊CSS、JavaScript兼耀、XMLHTTPRequest压昼、DOM對(duì)象四神獸，通過XmlHttpRequest

對(duì)象來(lái)向服務(wù)器發(fā)異步請(qǐng)求瘤运，從服務(wù)器獲得數(shù)據(jù)窍霞，然后用JavaScript來(lái)操作DOM、改變CSS拯坟，更新頁(yè)面但金。

Ajax重要影響是使WEB中的界面與應(yīng)用分離（也可以說(shuō)是數(shù)據(jù)與呈現(xiàn)分離），而在以前兩者是沒有清晰的界限的郁季。

數(shù)據(jù)與呈現(xiàn)分離的分離冷溃，有利于分工合作、減少非技術(shù)人員對(duì)頁(yè)面的修改造成的WEB應(yīng)用程序錯(cuò)誤梦裂、提高效率似枕、也更加適用于現(xiàn)在的發(fā)布系統(tǒng)。

也可以把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端年柠，利于客戶端閑置的處理能力來(lái)處理凿歼。

2、代碼示例

一段使用XMLHttpRequest發(fā)送Ajax請(qǐng)求的簡(jiǎn)單示例代碼冗恨。


function sendAjax() {

//構(gòu)造表單數(shù)據(jù)

var formData = new FormData();

formData.append('username', 'johndoe');

formData.append('id', 123456);

//創(chuàng)建xhr對(duì)象

var xhr = new XMLHttpRequest();

//設(shè)置xhr請(qǐng)求的超時(shí)時(shí)間

xhr.timeout = 3000;

//設(shè)置響應(yīng)返回的數(shù)據(jù)格式

xhr.responseType = "text";

//創(chuàng)建一個(gè) post 請(qǐng)求答憔，采用異步

xhr.open('POST', '/server', true);

//注冊(cè)相關(guān)事件回調(diào)處理函數(shù)

xhr.onload = function(e) {

if(this.status == 200||this.status == 304){

alert(this.responseText);

}

};

xhr.ontimeout = function(e) { ... };

xhr.onerror = function(e) { ... };

xhr.upload.onprogress = function(e) { ... };

//發(fā)送數(shù)據(jù)

xhr.send(formData);

}

上面是一個(gè)使用xhr發(fā)送表單數(shù)據(jù)的示例，整個(gè)流程可以參考注釋掀抹。




3虐拓、優(yōu)缺點(diǎn)


(1).AJAX的優(yōu)點(diǎn)

<1>.無(wú)刷新更新數(shù)據(jù)。AJAX最大優(yōu)點(diǎn)就是能在不刷新整個(gè)頁(yè)面的前提下與服務(wù)器通信維護(hù)數(shù)據(jù)渴丸。這使得Web應(yīng)用程序更為迅捷地響應(yīng)用戶交互侯嘀，并避免了在網(wǎng)絡(luò)上發(fā)送那些沒有改變的信息另凌，減少用戶等待時(shí)間，帶來(lái)非常好的用戶體驗(yàn)戒幔。

<2>.異步與服務(wù)器通信吠谢。

AJAX使用異步方式與服務(wù)器通信，不需要打斷用戶的操作诗茎，具有更加迅速的響應(yīng)能力工坊。優(yōu)化了Browser和Server之間的溝通，減少不必要的數(shù)據(jù)傳輸敢订、時(shí)間及降低網(wǎng)絡(luò)上數(shù)據(jù)流量王污。

<3>.前端和后端負(fù)載平衡。

AJAX可以把以前一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端楚午，利用客戶端閑置的能力來(lái)處理昭齐，減輕服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和寬帶租用成本矾柜。并且減輕服務(wù)器的負(fù)擔(dān)阱驾，AJAX的原則是“按需取數(shù)據(jù)”，可以最大程度的減少冗余請(qǐng)求和響應(yīng)對(duì)服務(wù)器造成的負(fù)擔(dān)怪蔑，提升站點(diǎn)性能

<4>.基于標(biāo)準(zhǔn)被廣泛支持里覆。

AJAX基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，不需要下載瀏覽器插件或者小程序缆瓣，但需要客戶允許JavaScript在瀏覽器上執(zhí)行喧枷。隨著Ajax的成熟，一些簡(jiǎn)化Ajax使用方法的程序庫(kù)也相繼問世弓坞。同樣隧甚，也出現(xiàn)了另一種輔助程序設(shè)計(jì)的技術(shù)，為那些不支持JavaScript的用戶提供替代功能昼丑。

<5>.界面與應(yīng)用分離呻逆。

Ajax使WEB中的界面與應(yīng)用分離（也可以說(shuō)是數(shù)據(jù)與呈現(xiàn)分離），有利于分工合作菩帝、減少非技術(shù)人員對(duì)頁(yè)面的修改造成的WEB應(yīng)用程序錯(cuò)誤咖城、提高效率、也更加適用于現(xiàn)在的發(fā)布系統(tǒng)呼奢。

(2).AJAX的缺點(diǎn)

<1>.AJAX干掉了Back和History功能宜雀，即對(duì)瀏覽器機(jī)制的破壞。

在動(dòng)態(tài)更新頁(yè)面的情況下握础，用戶無(wú)法回到前一個(gè)頁(yè)面狀態(tài)辐董，因?yàn)闉g覽器僅能記憶歷史記錄中的靜態(tài)頁(yè)面。一個(gè)被完整讀入的頁(yè)面與一個(gè)已經(jīng)被動(dòng)態(tài)修改過的頁(yè)面之間的差別非常微妙禀综；用戶通常會(huì)希望單擊后退按鈕能夠取消他們的前一次操作简烘，但是在Ajax應(yīng)用程序中苔严，這將無(wú)法實(shí)現(xiàn)。

<2>.AJAX的安全問題孤澎。

AJAX技術(shù)給用戶帶來(lái)很好的用戶體驗(yàn)的同時(shí)也對(duì)IT企業(yè)帶來(lái)了新的安全威脅届氢，Ajax技術(shù)就如同對(duì)企業(yè)數(shù)據(jù)建立了一個(gè)直接通道。這使得開發(fā)者在不經(jīng)意間會(huì)暴露比以前更多的數(shù)據(jù)和服務(wù)器邏輯覆旭。Ajax的邏輯可以對(duì)客戶端的安全掃描技術(shù)隱藏起來(lái)退子，允許黑客從遠(yuǎn)端服務(wù)器上建立新的攻擊。還有Ajax也難以避免一些已知的安全弱點(diǎn)型将，諸如跨站點(diǎn)腳步攻擊寂祥、SQL注入攻擊和基于Credentials的安全漏洞等等。

<3>.對(duì)搜索引擎支持較弱七兜。

對(duì)搜索引擎的支持比較弱丸凭。如果使用不當(dāng)，AJAX會(huì)增大網(wǎng)絡(luò)數(shù)據(jù)的流量惊搏，從而降低整個(gè)系統(tǒng)的性能贮乳。

<4>.破壞程序的異常處理機(jī)制。

<5>.違背URL和資源定位的初衷恬惯。

例如，我給你一個(gè)URL地址亚茬，如果采用了Ajax技術(shù)酪耳，也許你在該URL地址下面看到的和我在這個(gè)URL地址下看到的內(nèi)容是不同的。這個(gè)和資源定位的初衷是相背離的刹缝。

<6>.AJAX不能很好支持移動(dòng)設(shè)備碗暗。

一些手持設(shè)備（如手機(jī)、PDA等）現(xiàn)在還不能很好的支持Ajax梢夯，比如說(shuō)我們?cè)谑謾C(jī)的瀏覽器上打開采用Ajax技術(shù)的網(wǎng)站時(shí)言疗，它目前是不支持的。

<7>.客戶端過肥颂砸，太多客戶端代碼造成開發(fā)上的成本噪奄。

編寫復(fù)雜、容易出錯(cuò) 人乓；冗余代碼比較多（層層包含js文件是AJAX的通病勤篮，再加上以往的很多服務(wù)端代碼現(xiàn)在放到了客戶端）；破壞了Web的原有標(biāo)準(zhǔn)色罚。

需要注意的是：

Ajax開發(fā)時(shí)碰缔，網(wǎng)絡(luò)延遲——即用戶發(fā)出請(qǐng)求到服務(wù)器發(fā)出響應(yīng)之間的間隔——需要慎重考慮。不給予用戶明確的回應(yīng)戳护，沒有恰當(dāng)?shù)念A(yù)讀數(shù)據(jù)金抡，或者對(duì)XMLHttpRequest的不恰當(dāng)處理瀑焦，都會(huì)使用戶感到延遲，這是用戶不希望看到的梗肝，也是他們無(wú)法理解的榛瓮。通常的解決方案是，使用一個(gè)可視化的組件來(lái)告訴用戶系統(tǒng)正在進(jìn)行后臺(tái)操作并且正在讀取數(shù)據(jù)和內(nèi)容统捶。





3.常見問題

1榆芦、IE瀏覽器下面的緩存問題

2、跨域問題

3喘鸟、Ajax亂碼問題

4匆绣、使用post提交的時(shí)候需要設(shè)置content-type為"application/x-www-form-urlencoded"

5、Ajax對(duì)象屬性的大小寫問題

6什黑、Ajax狀態(tài)為0的問題



下面一一講解常見問題出現(xiàn)的原因和解決辦法





四.解決方案

1. 緩存問題



在IE瀏覽器下面使用get請(qǐng)求時(shí)崎淳，如果第一次請(qǐng)求了數(shù)據(jù)之后IE會(huì)自動(dòng)緩存數(shù)據(jù)，如果下一次再發(fā)送同樣的

請(qǐng)求的時(shí)候?yàn)g覽器會(huì)自動(dòng)先去找緩存顯示出來(lái)愕把，所以如果請(qǐng)求的數(shù)據(jù)有變化的時(shí)候拣凹，這里是看不到變化的。

解決辦法：

xhr.open("get","xxxx.aspx?_dc="+new Date().getTime(),true);

就是在請(qǐng)求的后面 加上時(shí)間戳或是隨機(jī)數(shù)恨豁，讓url變成唯一嚣镜，或者是，改成post請(qǐng)求橘蜜。

（get和post請(qǐng)求的區(qū)別可參見 淺談HTTP中Get與Post的區(qū)別）

2. 跨域問題

這是我們目前見到的最多的菊匿，也是最熟悉的一個(gè)問題。本地上面直接采用Nginx跨域?qū)崿F(xiàn)计福。在服務(wù)器上實(shí)現(xiàn)跨域跌捆，可以通過后端達(dá)成，可參考

>跨域有幾種處理方式象颖？

注意 Nginx跨域可以同時(shí)配置多個(gè)接口的佩厚，就是多寫幾個(gè)location就好了，然后location后面帶的參數(shù)不一樣就可以了说订。

3. Ajax亂碼問題

亂碼問題雖然我們目前遇到的不多抄瓦，但是也屬于比較常見的一個(gè)問題了。出現(xiàn)的主要原因就是編碼不一致導(dǎo)致的克蚂。

如果出現(xiàn)亂碼問題了闺鲸，首先檢查一下meta聲明的charset要和請(qǐng)求的頁(yè)面返回的charset一致。response.charset="gb2312 or utf-8"

4. 使用post提交的時(shí)候需要進(jìn)行的設(shè)置

content-Type: application/x-www-form-urlencoded;

//jQuery中埃叭，

content-Type: application/x-www-form-urlencoded;charset=utf-8;

//AngularJS中$http

content-Type: application/json; charset=utf-8;

//使用原生Ajax需要在open以后才能使用xhr.setRequestHeader()方法摸恍，否則出錯(cuò)

xhr.open("post","xxxx.aspx",true);

xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")

//用原生寫時(shí)必須在open()方法之后send()方法之前調(diào)用

5. Ajax對(duì)象屬性的大小寫問題

有些瀏覽器比如火狐，對(duì)大小寫是敏感的，if (xhr.readystate==4)這種寫法立镶，

在IE下是成立的壁袄，但是在Firefox下就行不通了，因?yàn)镮E不區(qū)分大小寫媚媒，F(xiàn)irefox是區(qū)分大小的嗜逻。標(biāo)準(zhǔn)寫法為if (xhr.readyState==4)，同理還有屬性

responseText缭召，responseXML栈顷。習(xí)慣采用駝峰形式的寫法可以避免這個(gè)問題。

6. Ajax狀態(tài)0的問題

有時(shí)候在測(cè)試Ajax代碼的時(shí)候加了 xhr.status==200的判斷后嵌巷，一直不執(zhí)行xhr.status==200的代碼萄凤，

這個(gè)就需要注意了。xhr.status==200是要通過服務(wù)器確認(rèn)后來(lái)返回的搪哪，在服務(wù)器頁(yè)面沒有發(fā)生錯(cuò)誤或者轉(zhuǎn)向時(shí)才返回200狀態(tài)的靡努，

此狀態(tài)和你通過瀏覽器訪問頁(yè)面時(shí)服務(wù)器定義的狀態(tài)一致。直接拖進(jìn)瀏覽器瀏覽結(jié)果或者雙擊運(yùn)行html頁(yè)面的晓折，未發(fā)生錯(cuò)誤時(shí)惑朦，此時(shí)的xhr.status是0，不是200漓概。

1. 緩存問題

在IE瀏覽器下面使用get請(qǐng)求時(shí)漾月，如果第一次請(qǐng)求了數(shù)據(jù)之后IE會(huì)自動(dòng)緩存數(shù)據(jù)，如果下一次再發(fā)送同樣的

請(qǐng)求的時(shí)候?yàn)g覽器會(huì)自動(dòng)先去找緩存顯示出來(lái)胃珍，所以如果請(qǐng)求的數(shù)據(jù)有變化的時(shí)候栅屏，這里是看不到變化的。

解決辦法：

xhr.open("get","xxxx.aspx?_dc="+new Date().getTime(),true);

就是在請(qǐng)求的后面 加上時(shí)間戳或是隨機(jī)數(shù)堂鲜，讓url變成唯一，或者是护奈，改成post請(qǐng)求缔莲。

（get和post請(qǐng)求的區(qū)別可參見淺談HTTP中Get與Post的區(qū)別）

2. 跨域問題

這是我們目前見到的最多的，也是最熟悉的一個(gè)問題霉旗。本地上面直接采用Nginx跨域?qū)崿F(xiàn)痴奏。在服務(wù)器上實(shí)現(xiàn)跨域，可以通過后端達(dá)成厌秒，可參考

>跨域有幾種處理方式读拆？

注意 Nginx跨域可以同時(shí)配置多個(gè)接口的，就是多寫幾個(gè)location就好了鸵闪，然后location后面帶的參數(shù)不一樣就可以了檐晕。

3. Ajax亂碼問題

亂碼問題雖然我們目前遇到的不多，但是也屬于比較常見的一個(gè)問題了。出現(xiàn)的主要原因就是編碼不一致導(dǎo)致的辟灰。

如果出現(xiàn)亂碼問題了个榕，首先檢查一下meta聲明的charset要和請(qǐng)求的頁(yè)面返回的charset一致。response.charset="gb2312 or utf-8"

4. 使用post提交的時(shí)候需要進(jìn)行的設(shè)置

content-Type: application/x-www-form-urlencoded;

//jQuery中芥喇，

content-Type: application/x-www-form-urlencoded;charset=utf-8;

//AngularJS中$http

content-Type: application/json; charset=utf-8;

//使用原生Ajax需要在open以后才能使用xhr.setRequestHeader()方法西采，否則出錯(cuò)

xhr.open("post","xxxx.aspx",true);

xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")

//用原生寫時(shí)必須在open()方法之后send()方法之前調(diào)用

5. Ajax對(duì)象屬性的大小寫問題

有些瀏覽器比如火狐，對(duì)大小寫是敏感的继控，if (xhr.readystate==4)這種寫法械馆，

在IE下是成立的，但是在Firefox下就行不通了武通，因?yàn)镮E不區(qū)分大小寫霹崎，F(xiàn)irefox是區(qū)分大小的。標(biāo)準(zhǔn)寫法為if (xhr.readyState==4)厅须，同理還有屬性

responseText仿畸，responseXML。習(xí)慣采用駝峰形式的寫法可以避免這個(gè)問題朗和。

6. Ajax狀態(tài)0的問題

有時(shí)候在測(cè)試Ajax代碼的時(shí)候加了 xhr.status==200的判斷后错沽，一直不執(zhí)行xhr.status==200的代碼，

這個(gè)就需要注意了眶拉。xhr.status==200是要通過服務(wù)器確認(rèn)后來(lái)返回的千埃，在服務(wù)器頁(yè)面沒有發(fā)生錯(cuò)誤或者轉(zhuǎn)向時(shí)才返回200狀態(tài)的，

此狀態(tài)和你通過瀏覽器訪問頁(yè)面時(shí)服務(wù)器定義的狀態(tài)一致忆植。直接拖進(jìn)瀏覽器瀏覽結(jié)果或者雙擊運(yùn)行html頁(yè)面的放可，未發(fā)生錯(cuò)誤時(shí)，此時(shí)的xhr.status是0朝刊，不是200耀里。



5.編碼實(shí)戰(zhàn)

jQuery方法

$.ajax({
url:"student-ajax/student",
type:"POST",
dataType:"json",
data:{
name:$("#names").val(),
qq:$("#QQs").val(),
},
success:function(data){
console.log(data);
if(data.code === 200){
alert($("#names").val() + "學(xué)員信息" +data.message);
}else{
alert(data.message);
}
},
error:function(data){
console.log(data);
alert("添加失敗");
}
});
}) ;
AngularJS方法
$http({
method:'get',
url:('/a/a/all/document?type=1&page='+$scope.page),
headers:{'Content-Type':'application/x-www-form-urlencoded'}
})
.success(function (response) {
console.log(response.total);
console.log(response);
// if (response.message === "查詢成功") {
$scope.userList = response.data;
$scope.userTotal = response.total;
$scope.page=response.page;
// console.log($scope.userList.total);
});
Javascript原生方法
var request = new XMLHttpRequest(); // 新建XMLHttpRequest對(duì)象;
request.onreadystatechange = function () { // 狀態(tài)發(fā)生變化時(shí)，函數(shù)被回調(diào);
if (request.readyState === 4) { // 成功完成
// 判斷響應(yīng)結(jié)果:
if (request.status === 200) {
// 成功拾氓，通過responseText拿到響應(yīng)的文本:
return success(request.responseText);
} else {
// 失敗冯挎，根據(jù)響應(yīng)碼判斷失敗原因:
return fail(request.status);
}
} else {
// HTTP請(qǐng)求還在繼續(xù)...
}
}
// 發(fā)送請(qǐng)求:
request.open("POST","/skill-ajax/a/login",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send();
alert('請(qǐng)求已發(fā)送，請(qǐng)等待響應(yīng)...');
// readyState值說(shuō)明
// 0,初始化,XHR對(duì)象已經(jīng)創(chuàng)建,還未執(zhí)行open
// 1,載入,已經(jīng)調(diào)用open方法,但是還沒發(fā)送請(qǐng)求
// 2,載入完成,請(qǐng)求已經(jīng)發(fā)送完成
// 3,交互,可以接收到部分?jǐn)?shù)據(jù)
// status值說(shuō)明
// 200:成功
// 404:沒有發(fā)現(xiàn)文件咙鞍、查詢或URl
// 500:服務(wù)器產(chǎn)生內(nèi)部錯(cuò)誤


原生的講解
(1)
在使用xhr對(duì)象發(fā)送請(qǐng)求和處理請(qǐng)求響應(yīng)之前房官，必須先用js語(yǔ)言創(chuàng)建一個(gè)xhr對(duì)象。由于xhr對(duì)象當(dāng)前還不是w3c標(biāo)準(zhǔn)续滋，所以才有多種方式進(jìn)行創(chuàng)建以解決兼容性問題翰守。具體創(chuàng)建方式如下：
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
(2) 向服務(wù)器發(fā)送請(qǐng)求
(a) open(method,url,async)
規(guī)定請(qǐng)求的類型、URL 以及是否異步處理請(qǐng)求疲酌。
method：請(qǐng)求的類型蜡峰；GET 或 POST
url：文件在服務(wù)器上的位置
async：true（異步）或 false（同步）
(b)send(string)
將請(qǐng)求發(fā)送到服務(wù)器。
string：僅用于 POST 請(qǐng)求

6.擴(kuò)展思考

AngularJS請(qǐng)求的時(shí)候,success()和then()方法的區(qū)別?
$http({
url:'data.json',
method:'GET'
}).success(function(data,header,config,status){
//code goes here
}).error(function(data,header,config,status) {
//code goes here
});
var promise = $http({
url:'data.json',
method:'GET'
});
promise.then(function(resp) {
//resp是一個(gè)響應(yīng)對(duì)象
}, function() {
//帶有錯(cuò)誤信息的resp
})
要將區(qū)別先弄清$http服務(wù)，它是對(duì)原生XMLHttpRequest對(duì)象的簡(jiǎn)單封裝事示，是只能接受一個(gè)參數(shù)的方法早像，這個(gè)方法會(huì)返回一個(gè)promise對(duì)象，具有sccess和error兩個(gè)方法肖爵。當(dāng)然卢鹦，我們也可以在響應(yīng)返回時(shí)用then方法來(lái)處理，會(huì)得到一個(gè)特殊的參數(shù)劝堪，代表了對(duì)象的成功或失敗信息冀自，或者可以使用success和error回調(diào)代替。
這樣就很明晰了秒啦，then方法和success方法的主要區(qū)別就是熬粗，then方法會(huì)接受到完整的響應(yīng)對(duì)象，信息更為全面余境，而success則會(huì)對(duì)響應(yīng)對(duì)象進(jìn)行析構(gòu)驻呐，使用起來(lái)更為方便。

7.參考文獻(xiàn)

參考一：什么是跨域
參考二：AngularJS中then和success的區(qū)別
參考三：Ajax常見問題
參考四：你真的會(huì)使用XMLHttpRequest嗎芳来？
參考五：AJAX工作原理及其優(yōu)缺點(diǎn)
參考六：深入理解ajax系列第一篇——XHR對(duì)象
參考七：XMLHttpRequest 對(duì)象
8.更多討論

題外話含末，沒有ajax的時(shí)候茂蚓，怎樣提高用戶的體驗(yàn)武翎？

PPT連接：
PPT
視頻鏈接


什么是Ajax（Ajax的來(lái)歷、運(yùn)行原理檐春、優(yōu)缺點(diǎn)及其它）_騰訊視頻



如果這篇文章對(duì)你有幫助顽聂，并且使你對(duì)修真院免費(fèi)在線學(xué)習(xí)感興趣肥惭，可以通過我的鏈接注冊(cè)成員會(huì)，這會(huì)使我得到學(xué)分（兌換學(xué)時(shí)）延長(zhǎng)學(xué)習(xí)時(shí)間：
邀請(qǐng)鏈接：http://www.jnshu.com/login/1/13374512
邀請(qǐng)碼：13374512
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末紊搪，一起剝皮案震驚了整個(gè)濱河市蜜葱，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌耀石，老刑警劉巖笼沥，帶你破解...
    沈念sama閱讀 219,366評(píng)論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異娶牌，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)馆纳，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,521評(píng)論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門诗良，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人鲁驶，你說(shuō)我怎么就攤上這事鉴裹。” “怎么了？”我有些...
    開封第一講書人閱讀 165,689評(píng)論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
       文/不壞的土叔    我叫張陵径荔，是天一觀的道長(zhǎng)督禽。 經(jīng)常有香客問我，道長(zhǎng)总处，這世上最難降的妖魔是什么狈惫？ 我笑而不...
    開封第一講書人閱讀 58,925評(píng)論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮鹦马，結(jié)果婚禮上胧谈，老公的妹妹穿的比我還像新娘。我一直安慰自己荸频，他們只是感情好菱肖，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,942評(píng)論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著旭从，像睡著了一般稳强。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上和悦，一...
    開封第一講書人閱讀 51,727評(píng)論 1贊 305
  • 城市分裂傳說(shuō)
    那天退疫，我揣著相機(jī)與錄音，去河邊找鬼摹闽。 笑死蹄咖，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的付鹿。 我是一名探鬼主播澜汤，決...
    沈念sama閱讀 40,447評(píng)論 3贊 420
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼舵匾！你這毒婦竟也來(lái)了俊抵？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,349評(píng)論 0贊 276
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤坐梯，失蹤者是張志新（化名）和其女友劉穎徽诲，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體吵血，經(jīng)...
    沈念sama閱讀 45,820評(píng)論 1贊 317
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡谎替，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,990評(píng)論 3贊 337
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了蹋辅。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片钱贯。...
    茶點(diǎn)故事閱讀 40,127評(píng)論 1贊 351
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖侦另，靈堂內(nèi)的尸體忽然破棺而出秩命，到底是詐尸還是另有隱情尉共，我是刑警寧澤，帶...
    沈念sama閱讀 35,812評(píng)論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布弃锐，位于F島的核電站袄友，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏霹菊。R本人自食惡果不足惜剧蚣，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,471評(píng)論 3贊 331
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望浇辜。 院中可真熱鬧券敌，春花似錦、人聲如沸柳洋。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,017評(píng)論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)熊镣。三九已至卑雁，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間绪囱，已是汗流浹背测蹲。 一陣腳步聲響...
    開封第一講書人閱讀 33,142評(píng)論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留鬼吵，地道東北人扣甲。 一個(gè)月前我還...
    沈念sama閱讀 48,388評(píng)論 3贊 373
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長(zhǎng)得像齿椅，于是被迫代替她去往敵國(guó)和親琉挖。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,066評(píng)論 2贊 355
推薦閱讀更多精彩內(nèi)容
  • AJAX 原生js操作ajax 1.創(chuàng)建XMLHttpRequest對(duì)象 var xhr = new XMLHtt...
    碧玉含香閱讀 3,201評(píng)論 0贊 7
  • 本文詳細(xì)介紹了 XMLHttpRequest 相關(guān)知識(shí)涣脚，涉及內(nèi)容： AJAX示辈、XMLHTTP、XMLHttpReq...
    semlinker閱讀 13,665評(píng)論 2贊 18
  • 1.AJAX全稱為“Asynchronous JavaScript and XML”（異步JavaScript和X...
    空谷悠閱讀 550評(píng)論 2贊 11
  • Ajax和XMLHttpRequest 我們通常將Ajax等同于XMLHttpRequest遣蚀，但細(xì)究起來(lái)它們兩個(gè)是...
    changxiaonan閱讀 2,238評(píng)論 0贊 2
  • ajax作為前端開發(fā)必需的基礎(chǔ)能力之一矾麻，你可能會(huì)使用它，但并不一定懂得其原理芭梯，以及更深入的服務(wù)器通信相關(guān)的知識(shí)险耀。在...
    蕭玄辭閱讀 823評(píng)論 0贊 0