大家好，我是IT修真院深圳分院第3期的學(xué)員，一枚正直純潔善良的前端程序員，今天給大家分享一下，修真院官網(wǎng)前端工程師深度思考中的知識(shí)點(diǎn)——什么是Ajax
一.背景介紹
Ajax的來(lái)歷
套用一句不恰當(dāng)?shù)脑?huà)，Ajax就是中間商（并不賺取差價(jià)），換一個(gè)專(zhuān)業(yè)點(diǎn)的說(shuō)話(huà)，現(xiàn)在它就是腳本發(fā)起HTTP通信的代名詞
具體什么是Ajax呢？我們?cè)谡f(shuō)這個(gè)問(wèn)題之前，需要思考一個(gè)問(wèn)題：當(dāng)我們上網(wǎng)的時(shí)候，我們到底在上什么？
大部分人都是在上瀏覽器。
當(dāng)我們?cè)跒g覽器地址欄鍵入一個(gè)網(wǎng)址，或者通過(guò)網(wǎng)頁(yè)表單向服務(wù)器提交內(nèi)容的時(shí)候,我們就開(kāi)始與瀏覽器進(jìn)行交互。而瀏覽器在這個(gè)時(shí)候，開(kāi)始與服務(wù)器進(jìn)行交互。
傳統(tǒng)的Web應(yīng)用交互由用戶(hù)觸發(fā)一個(gè)HTTP請(qǐng)求到服務(wù)器,服務(wù)器對(duì)其進(jìn)行處理后再返回一個(gè)新的HTML頁(yè)到客戶(hù)端。
每當(dāng)服務(wù)器處理客戶(hù)端提交的請(qǐng)求時(shí),客戶(hù)都只能空閑等待,并且哪怕只是一次很小的交互、只需從服務(wù)器端得到很簡(jiǎn)單的一個(gè)數(shù)據(jù)
都要返回一個(gè)完整的HTML頁(yè),而客戶(hù)端每次都要浪費(fèi)時(shí)間和帶寬去重新讀取整個(gè)頁(yè)面。
1999年，微軟公司發(fā)布IE瀏覽器5.0版，第一次引入新功能：允許JavaScript腳本向服務(wù)器發(fā)起HTTP請(qǐng)求。這個(gè)功能當(dāng)時(shí)并沒(méi)有引起注意,為什么？
實(shí)際上，人們一直在尋求改善傳統(tǒng)的web應(yīng)用交互方式。1999年以前，JS可以通過(guò)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)稱(chēng)XHR），這是由微軟首先引入的一個(gè)特性，最早應(yīng)用在它的IE5瀏覽器上。
在IE5中，XHR對(duì)象是通過(guò)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年，依賴(lài)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依賴(lài)CSS/HTML/Javascript，而其中最核心的依賴(lài)是瀏覽器提供的XMLHttpRequest簡(jiǎn)稱(chēng)（XHR）對(duì)象，是這個(gè)對(duì)象使得瀏覽器可以發(fā)出HTTP請(qǐng)求與接收HTTP
響應(yīng)。
W3C形象的稱(chēng)XHR對(duì)象是開(kāi)發(fā)者的夢(mèng)想
Ajax的工作原理相當(dāng)于在用戶(hù)和服務(wù)器之間加了—個(gè)中間層(AJAX引擎),使用戶(hù)操作與服務(wù)器響應(yīng)異步化。
并不是所有的用戶(hù)請(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ì)象四神獸，通過(guò)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)分離），而在以前兩者是沒(méi)有清晰的界限的。
數(shù)據(jù)與呈現(xiàn)分離的分離，有利于分工合作、減少非技術(shù)人員對(duì)頁(yè)面的修改造成的WEB應(yīng)用程序錯(cuò)誤、提高效率、也更加適用于現(xiàn)在的發(fā)布系統(tǒng)。
也可以把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶(hù)端，利于客戶(hù)端閑置的處理能力來(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)用戶(hù)交互，并避免了在網(wǎng)絡(luò)上發(fā)送那些沒(méi)有改變的信息，減少用戶(hù)等待時(shí)間，帶來(lái)非常好的用戶(hù)體驗(yàn)。
<2>.異步與服務(wù)器通信。
AJAX使用異步方式與服務(wù)器通信，不需要打斷用戶(hù)的操作，具有更加迅速的響應(yīng)能力。優(yōu)化了Browser和Server之間的溝通，減少不必要的數(shù)據(jù)傳輸、時(shí)間及降低網(wǎng)絡(luò)上數(shù)據(jù)流量。
<3>.前端和后端負(fù)載平衡。
AJAX可以把以前一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶(hù)端，利用客戶(hù)端閑置的能力來(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ù)，不需要下載瀏覽器插件或者小程序，但需要客戶(hù)允許JavaScript在瀏覽器上執(zhí)行。隨著Ajax的成熟，一些簡(jiǎn)化Ajax使用方法的程序庫(kù)也相繼問(wèn)世。同樣，也出現(xiàn)了另一種輔助程序設(shè)計(jì)的技術(shù)，為那些不支持JavaScript的用戶(hù)提供替代功能。
<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è)面的情況下，用戶(hù)無(wú)法回到前一個(gè)頁(yè)面狀態(tài)，因?yàn)闉g覽器僅能記憶歷史記錄中的靜態(tài)頁(yè)面。一個(gè)被完整讀入的頁(yè)面與一個(gè)已經(jīng)被動(dòng)態(tài)修改過(guò)的頁(yè)面之間的差別非常微妙；用戶(hù)通常會(huì)希望單擊后退按鈕能夠取消他們的前一次操作，但是在Ajax應(yīng)用程序中，這將無(wú)法實(shí)現(xiàn)。
<2>.AJAX的安全問(wèn)題。
AJAX技術(shù)給用戶(hù)帶來(lái)很好的用戶(hù)體驗(yàn)的同時(shí)也對(duì)IT企業(yè)帶來(lái)了新的安全威脅，Ajax技術(shù)就如同對(duì)企業(yè)數(shù)據(jù)建立了一個(gè)直接通道。這使得開(kāi)發(fā)者在不經(jīng)意間會(huì)暴露比以前更多的數(shù)據(jù)和服務(wù)器邏輯。Ajax的邏輯可以對(duì)客戶(hù)端的安全掃描技術(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ī)的瀏覽器上打開(kāi)采用Ajax技術(shù)的網(wǎng)站時(shí)，它目前是不支持的。
<7>.客戶(hù)端過(guò)肥，太多客戶(hù)端代碼造成開(kāi)發(fā)上的成本。
編寫(xiě)復(fù)雜、容易出錯(cuò) ；冗余代碼比較多（層層包含js文件是AJAX的通病，再加上以往的很多服務(wù)端代碼現(xiàn)在放到了客戶(hù)端）；破壞了Web的原有標(biāo)準(zhǔn)。
需要注意的是：
Ajax開(kāi)發(fā)時(shí)，網(wǎng)絡(luò)延遲——即用戶(hù)發(fā)出請(qǐng)求到服務(wù)器發(fā)出響應(yīng)之間的間隔——需要慎重考慮。不給予用戶(hù)明確的回應(yīng)，沒(méi)有恰當(dāng)?shù)念A(yù)讀數(shù)據(jù)，或者對(duì)XMLHttpRequest的不恰當(dāng)處理，都會(huì)使用戶(hù)感到延遲，這是用戶(hù)不希望看到的，也是他們無(wú)法理解的。通常的解決方案是，使用一個(gè)可視化的組件來(lái)告訴用戶(hù)系統(tǒng)正在進(jìn)行后臺(tái)操作并且正在讀取數(shù)據(jù)和內(nèi)容。
3.常見(jiàn)問(wèn)題
1、IE瀏覽器下面的緩存問(wèn)題
2、跨域問(wèn)題
3、Ajax亂碼問(wèn)題
4、使用post提交的時(shí)候需要設(shè)置content-type為"application/x-www-form-urlencoded"
5、Ajax對(duì)象屬性的大小寫(xiě)問(wèn)題
6、Ajax狀態(tài)為0的問(wèn)題
下面一一講解常見(jiàn)問(wèn)題出現(xiàn)的原因和解決辦法
四.解決方案
1. 緩存問(wèn)題
在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ū)別可參見(jiàn) 淺談HTTP中Get與Post的區(qū)別）
2. 跨域問(wèn)題
這是我們目前見(jiàn)到的最多的，也是最熟悉的一個(gè)問(wèn)題。本地上面直接采用Nginx跨域?qū)崿F(xiàn)。在服務(wù)器上實(shí)現(xiàn)跨域，可以通過(guò)后端達(dá)成，可參考
>跨域有幾種處理方式？
注意 Nginx跨域可以同時(shí)配置多個(gè)接口的，就是多寫(xiě)幾個(gè)location就好了，然后location后面帶的參數(shù)不一樣就可以了。
3. Ajax亂碼問(wèn)題
亂碼問(wèn)題雖然我們目前遇到的不多，但是也屬于比較常見(jiàn)的一個(gè)問(wèn)題了。出現(xiàn)的主要原因就是編碼不一致導(dǎo)致的。
如果出現(xiàn)亂碼問(wè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")
//用原生寫(xiě)時(shí)必須在open()方法之后send()方法之前調(diào)用
5. Ajax對(duì)象屬性的大小寫(xiě)問(wèn)題
有些瀏覽器比如火狐，對(duì)大小寫(xiě)是敏感的，if (xhr.readystate==4)這種寫(xiě)法，
在IE下是成立的，但是在Firefox下就行不通了，因?yàn)镮E不區(qū)分大小寫(xiě)，F(xiàn)irefox是區(qū)分大小的。標(biāo)準(zhǔn)寫(xiě)法為if (xhr.readyState==4)，同理還有屬性
responseText，responseXML。習(xí)慣采用駝峰形式的寫(xiě)法可以避免這個(gè)問(wèn)題。
6. Ajax狀態(tài)0的問(wèn)題
有時(shí)候在測(cè)試Ajax代碼的時(shí)候加了 xhr.status==200的判斷后，一直不執(zhí)行xhr.status==200的代碼，
這個(gè)就需要注意了。xhr.status==200是要通過(guò)服務(wù)器確認(rèn)后來(lái)返回的，在服務(wù)器頁(yè)面沒(méi)有發(fā)生錯(cuò)誤或者轉(zhuǎn)向時(shí)才返回200狀態(tài)的，
此狀態(tài)和你通過(guò)瀏覽器訪問(wèn)頁(yè)面時(shí)服務(wù)器定義的狀態(tài)一致。直接拖進(jìn)瀏覽器瀏覽結(jié)果或者雙擊運(yùn)行html頁(yè)面的，未發(fā)生錯(cuò)誤時(shí)，此時(shí)的xhr.status是0，不是200。
1. 緩存問(wèn)題
在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ū)別可參見(jiàn)淺談HTTP中Get與Post的區(qū)別）
2. 跨域問(wèn)題
這是我們目前見(jiàn)到的最多的，也是最熟悉的一個(gè)問(wèn)題。本地上面直接采用Nginx跨域?qū)崿F(xiàn)。在服務(wù)器上實(shí)現(xiàn)跨域，可以通過(guò)后端達(dá)成，可參考
>跨域有幾種處理方式？
注意 Nginx跨域可以同時(shí)配置多個(gè)接口的，就是多寫(xiě)幾個(gè)location就好了，然后location后面帶的參數(shù)不一樣就可以了。
3. Ajax亂碼問(wèn)題
亂碼問(wèn)題雖然我們目前遇到的不多，但是也屬于比較常見(jiàn)的一個(gè)問(wèn)題了。出現(xiàn)的主要原因就是編碼不一致導(dǎo)致的。
如果出現(xiàn)亂碼問(wè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")
//用原生寫(xiě)時(shí)必須在open()方法之后send()方法之前調(diào)用
5. Ajax對(duì)象屬性的大小寫(xiě)問(wèn)題
有些瀏覽器比如火狐，對(duì)大小寫(xiě)是敏感的，if (xhr.readystate==4)這種寫(xiě)法，
在IE下是成立的，但是在Firefox下就行不通了，因?yàn)镮E不區(qū)分大小寫(xiě)，F(xiàn)irefox是區(qū)分大小的。標(biāo)準(zhǔn)寫(xiě)法為if (xhr.readyState==4)，同理還有屬性
responseText，responseXML。習(xí)慣采用駝峰形式的寫(xiě)法可以避免這個(gè)問(wèn)題。
6. Ajax狀態(tài)0的問(wèn)題
有時(shí)候在測(cè)試Ajax代碼的時(shí)候加了 xhr.status==200的判斷后，一直不執(zhí)行xhr.status==200的代碼，
這個(gè)就需要注意了。xhr.status==200是要通過(guò)服務(wù)器確認(rèn)后來(lái)返回的，在服務(wù)器頁(yè)面沒(méi)有發(fā)生錯(cuò)誤或者轉(zhuǎn)向時(shí)才返回200狀態(tài)的，
此狀態(tài)和你通過(guò)瀏覽器訪問(wèn)頁(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 === "查詢(xún)成功") {
$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) {
// 成功，通過(guò)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方法,但是還沒(méi)發(fā)送請(qǐng)求
// 2,載入完成,請(qǐng)求已經(jīng)發(fā)送完成
// 3,交互,可以接收到部分?jǐn)?shù)據(jù)
// status值說(shuō)明
// 200:成功
// 404:沒(méi)有發(fā)現(xiàn)文件、查詢(xú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)建以解決兼容性問(wèn)題。具體創(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)求的類(lèi)型、URL 以及是否異步處理請(qǐng)求。
method：請(qǐng)求的類(lèi)型；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常見(jiàn)問(wèn)題
參考四：你真的會(huì)使用XMLHttpRequest嗎？
參考五：AJAX工作原理及其優(yōu)缺點(diǎn)
參考六：深入理解ajax系列第一篇——XHR對(duì)象
參考七：XMLHttpRequest 對(duì)象
8.更多討論
題外話(huà)，沒(méi)有ajax的時(shí)候，怎樣提高用戶(hù)的體驗(yàn)？
PPT連接：
視頻鏈接
如果這篇文章對(duì)你有幫助，并且使你對(duì)修真院免費(fèi)在線(xiàn)學(xué)習(xí)感興趣，可以通過(guò)我的鏈接注冊(cè)成員會(huì)，這會(huì)使我得到學(xué)分（兌換學(xué)時(shí)）延長(zhǎng)學(xué)習(xí)時(shí)間：
邀請(qǐng)鏈接：http://www.jnshu.com/login/1/13374512
邀請(qǐng)碼：13374512
