深入理解Ajax

ajax的工作原理：

ajax的工作原理相當(dāng)于在用戶和服務(wù)器之間加了一個(gè)中間層（ajax引擎），使用戶操作與服務(wù)器響應(yīng)異步化。并不是所有的用戶請(qǐng)求都提交給服務(wù)器械筛，只有確定需要從服務(wù)器讀取新數(shù)據(jù)時(shí)再由ajax引擎代為向服務(wù)器提交請(qǐng)求。

ajax的核心：

有javascript犬绒，XMLHTTPRequest，DOM對(duì)象組成场躯，通過(guò)XMLHTTPRequest對(duì)象來(lái)向服務(wù)器異步請(qǐng)求，從服務(wù)器獲得數(shù)據(jù)旅挤，然后用javascript來(lái)操作DOM來(lái)更新頁(yè)面踢关，這其中最關(guān)鍵的一步就是從服務(wù)器獲得請(qǐng)求數(shù)據(jù)

XMLHTTPRequest對(duì)象：

AJAX的最大特點(diǎn)是無(wú)需刷新頁(yè)面便可向服務(wù)器傳輸或讀寫(xiě)數(shù)據(jù)，這一特點(diǎn)主要得益于XMLHTTP組件的XMLHTTPRequest對(duì)象粘茄。

創(chuàng)建AJAX的過(guò)程：

XMLHttpRequest是AJAX的基礎(chǔ)签舞，用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)，這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下柒瓣，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新

1儒搭，創(chuàng)建XMLHTTPRequest對(duì)象：（兼容處理）

var xhr = null;

if(window.XMLHttpRequest) { //前面必須添加window否則報(bào)錯(cuò)（不能拿一個(gè)不存在的對(duì)象作為判斷條件）

xhr = new XMLHttpRequest()；

} else {

xhr = new ActiveXObject('Microsoft.XMLHTTP')

}

2嘹朗，建立對(duì)服務(wù)器的調(diào)用

xhr.open(method, url , async)

method： 請(qǐng)求數(shù)據(jù)類(lèi)型（get师妙，post诵肛，options屹培，head，put怔檩，delete褪秀，trace，connect）

get請(qǐng)求：

xhr.send()

post請(qǐng)求：

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //向請(qǐng)求添加HTTP頭 xhr.send("fname=Bill&lname=Gates");

GET 還是 POST薛训？

與 POST 相比媒吗，GET 更簡(jiǎn)單也更快，并且在大部分情況下都能用乙埃。

然而闸英，在以下情況中，請(qǐng)使用 POST 請(qǐng)求：

a. 無(wú)法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）介袜；

b. 向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒(méi)有數(shù)據(jù)量限制）甫何；

c. 發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠遇伞。

url：文件在服務(wù)器上的位置

async：true（異步）或false（同步）

同步：指發(fā)出數(shù)據(jù)后辙喂，等接收到響應(yīng)以后再發(fā)送下一個(gè)數(shù)據(jù)包；

闡述：提交請(qǐng)求 -> 等待服務(wù)器處理 -> 處理完畢返回這個(gè)期間客戶端瀏覽器不能干任何事情鸠珠；當(dāng)前只能做一件事情巍耗，其它事情必須等當(dāng)前的事情完成，才能繼續(xù)后面的事情

異步：指發(fā)出數(shù)據(jù)后渐排，不用等待接收到響應(yīng)炬太，接著發(fā)送下一個(gè)數(shù)據(jù)包；

闡述：提交請(qǐng)求 -> 等待服務(wù)器處理(這時(shí)瀏覽器仍然可以做其他事情) -> 處理完畢驯耻；三心二意娄琉，同時(shí)可以做多件事情次乓；

Ajax發(fā)送請(qǐng)求時(shí)候分為同步和異步：

異步傳輸方式是用的最多的也是默認(rèn)的方式，他避免了服務(wù)器檢索給用戶帶來(lái)的時(shí)間延遲孽水。在異步傳輸時(shí)候票腰，它只是在后面悄悄進(jìn)行著，用戶仍舊可以做他做的事情女气，不會(huì)給用戶任何的等待的感覺(jué)杏慰。在傳輸?shù)臄?shù)據(jù)量較大的時(shí)候，服務(wù)器檢索的時(shí)間就更長(zhǎng)了炼鞠，但是用戶卻不知道缘滥，用戶仍舊專(zhuān)注于頁(yè)面上面的操作，根本就不知道服務(wù)器都干了些什么谒主，就給用戶良好的體驗(yàn)朝扼。

同步傳輸方式卻相反，他就好像是剛剛加載頁(yè)面的那一刻一樣霎肯，當(dāng)發(fā)出了同步請(qǐng)求之后擎颖，瀏覽器就在等待，等待服務(wù)器檢索完畢观游，返回結(jié)果搂捧。此時(shí)，鼠標(biāo)會(huì)變成等待的形狀懂缕，提醒我們的用戶請(qǐng)求還沒(méi)有相應(yīng)允跑，您什么也不能做，我們的用戶就什么也干不成搪柑，能夠做的一件事就是——等待……雖然用戶已經(jīng)習(xí)慣了等待整改頁(yè)面的加載聋丝，雖然在ajax里面同步請(qǐng)求的時(shí)間一般不會(huì)大于整個(gè)頁(yè)面加載的時(shí)間，但是你要知道什么都不做只是在那里被動(dòng)等待是多么痛苦的一件事情工碾。所以弱睦，這個(gè)同步請(qǐng)求要慎重使用……

說(shuō)到這里，我們不得不提出疑問(wèn)倚喂，既然異步請(qǐng)求這么好每篷，為啥不用異步請(qǐng)求呢？干脆不要同步請(qǐng)求得了端圈。呵呵焦读，你先別說(shuō)的太急，假如有這么一個(gè)情況舱权，我們這一步請(qǐng)求的結(jié)果是下一步請(qǐng)求的前提矗晃，只有知道這一步請(qǐng)求的結(jié)果用戶以后所做的才有意義。那么你說(shuō)應(yīng)該使用同步請(qǐng)求還是異步請(qǐng)求呢宴倍？顯而易見(jiàn)张症，同步請(qǐng)求吧仓技，為了下一步所作的更有意義，我們親愛(ài)的用戶等一下又有何妨俗他？

同步請(qǐng)求和異步請(qǐng)求脖捻，各有用處，沒(méi)有好壞之分兆衅，只又用的合適不合適的問(wèn)題

Ajax優(yōu)點(diǎn)：

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ā)送那些沒(méi)有改變的信息摩疑，減少用戶等待時(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ù)也相繼問(wèn)世逛薇。同樣捺疼，也出現(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)

Ajax的缺點(diǎn)

1，AJAX干掉了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)修改過(guò)的頁(yè)面之間的差別非常微妙恋昼；

用戶通常會(huì)希望單擊后退按鈕能夠取消他們的前一次操作，但是在Ajax應(yīng)用程序中赶促，這將無(wú)法實(shí)現(xiàn)液肌。

用過(guò)Gmail的知道，Gmail下面采用的Ajax技術(shù)解決了這個(gè)問(wèn)題鸥滨，在Gmail下面是可以后退的嗦哆，

但是，它也并不能改變Ajax的機(jī)制婿滓，它只是采用的一個(gè)比較笨但是有效的辦法老速，即用戶單擊后退按鈕訪問(wèn)歷史記錄時(shí)，

通過(guò)創(chuàng)建或使用一個(gè)隱藏的IFRAME來(lái)重現(xiàn)頁(yè)面上的變更凸主。

一個(gè)相關(guān)的觀點(diǎn)認(rèn)為橘券，使用動(dòng)態(tài)頁(yè)面更新使得用戶難于將某個(gè)特定的狀態(tài)保存到收藏夾中。該問(wèn)題的解決方案也已出現(xiàn)卿吐，大部分都使用URL片斷標(biāo)識(shí)符（通常被稱(chēng)為錨點(diǎn)旁舰，即URL中#后面的部分）來(lái)保持跟蹤，

允許用戶回到指定的某個(gè)應(yīng)用程序狀態(tài)嗡官。（許多瀏覽器允許JavaScript動(dòng)態(tài)更新錨點(diǎn)箭窜，這使得Ajax應(yīng)用程序能夠在更新顯示內(nèi)容的同時(shí)更新錨點(diǎn)。）這些解決方案也同時(shí)解決了許多關(guān)于不支持后退按鈕的爭(zhēng)論

2衍腥，AJAX的安全問(wèn)題：

AJAX技術(shù)給用戶帶來(lái)很好的用戶體驗(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ì)客戶端的安全掃描技術(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诗舰，AJAX不能很好支持移動(dòng)設(shè)備：

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

5边琉，客戶端過(guò)肥属百，太多客戶端代碼造成開(kāi)發(fā)上的成本

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

XMLHttpRequest對(duì)象有三個(gè)重要的屬性：

1渔呵，onreadystatechange 狀態(tài)改變的事件觸發(fā)器，每個(gè)狀態(tài)改變時(shí)都會(huì)觸發(fā)這個(gè)事件處理器

2砍鸠，readyState 從0到4發(fā)生變化

0 = 未初始化扩氢，

1 = 正在加載/服務(wù)器連接已建立，

2 = 已加載/請(qǐng)求已接收爷辱，

3 = 交互中/請(qǐng)求處理中录豺，

4 = 請(qǐng)求完成

3，status 服務(wù)器的HTTP狀態(tài)碼：

1字頭：消息托嚣。這一類(lèi)型的狀態(tài)碼巩检，代表請(qǐng)求已被接受厚骗，需要繼續(xù)處理示启。

2字頭：成功。這一類(lèi)型的狀態(tài)碼领舰，代表請(qǐng)求已成功被服務(wù)器接收夫嗓、理解、并接受冲秽。( 200:'OK' )

3字頭：重定向舍咖。這類(lèi)狀態(tài)碼代表需要客戶端采取進(jìn)一步的操作才能完成請(qǐng)求。( 304:'Not Modified' )

4字頭：請(qǐng)求錯(cuò)誤锉桑。這類(lèi)的狀態(tài)碼代表了客戶端看起來(lái)可能發(fā)生了錯(cuò)誤排霉，妨礙了服務(wù)器的處理

5、6字頭：服務(wù)器錯(cuò)誤民轴。這類(lèi)狀態(tài)碼代表了服務(wù)器在處理請(qǐng)求的過(guò)程中有錯(cuò)誤或者異常狀態(tài)發(fā)生