前端中的Ajax的工作原理詳解

Ajax的原理簡(jiǎn)單來說通過XmlHttpRequest對(duì)象來向服務(wù)器發(fā)異步請(qǐng)求，從服務(wù)器獲得數(shù)據(jù)，然后用javascript來操作DOM而更新頁面。這其中最關(guān)鍵的一步就是從服務(wù)器獲得請(qǐng)求數(shù)據(jù)

使用Ajax的主要原因:1、通過適當(dāng)?shù)腁jax應(yīng)用達(dá)到更好的用戶體驗(yàn)；2、把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利于客戶端閑置的處理能力來處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，從而達(dá)到節(jié)約ISP的空間及帶寬租用成本的目的。  

Ajax是Asynchronous JavaScript and XML的縮寫。它包括

使用XHTML和CSS標(biāo)準(zhǔn)化呈現(xiàn);

使用DOM實(shí)現(xiàn)動(dòng)態(tài)顯示和交互;

使用XML和XSLT進(jìn)行數(shù)據(jù)交換與處理;

使用XMLHttpRequest進(jìn)行異步數(shù)據(jù)讀取;

最后用JavaScript綁定和處理所有數(shù)據(jù);

工作原理

    Ajax的工作原理相當(dāng)于在用戶和服務(wù)器之間加了—個(gè)中間層,使用戶操作與服務(wù)器響應(yīng)異步化。并不是所有的用戶請(qǐng)求都提交給服務(wù)器,像—些數(shù)據(jù)驗(yàn)證和數(shù)據(jù)處理等都交給Ajax引擎自己來做, 只有確定需要從服務(wù)器讀取新數(shù)據(jù)時(shí)再由Ajax引擎代為向服務(wù)器提交請(qǐng)求。

    Ajax其核心只有JavaScript、XMLHTTPRequest和DOM，在舊的交互方式中,由用戶觸發(fā)一個(gè)HTTP請(qǐng)求到服務(wù)器,服務(wù)器對(duì)其進(jìn)行處理后再返回一個(gè)新的HTHL頁到客戶端, 每當(dāng)服務(wù)器處理客戶端提交的請(qǐng)求時(shí),客戶都只能空閑等待,并且哪怕只是一次很小的交互、只需從服務(wù)器端得到很簡(jiǎn)單的一個(gè)數(shù)據(jù),都要返回一個(gè)完整的HTML頁,而用戶每次都要浪費(fèi)時(shí)間和帶寬去重新讀取整個(gè)頁面。而使用Ajax后用戶從感覺上幾乎所有的操作都會(huì)很快響應(yīng)沒有頁面重載（白屏）的等待。

1、XMLHTTPRequest

    Ajax的一個(gè)最大的特點(diǎn)是無需刷新頁面便可向服務(wù)器傳輸或讀寫數(shù)據(jù)(又稱無刷新更新頁面),這一特點(diǎn)主要得益于XMLHTTP組件XMLHTTPRequest對(duì)象。

XMLHttpRequest 對(duì)象方法描述

abort() 停止當(dāng)前請(qǐng)求

getAllResponseHeaders() 作為字符串返問完整的headers

getResponseHeader("headerLabel") 作為字符串返問單個(gè)的header標(biāo)簽

open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 設(shè)置未決的請(qǐng)求的目標(biāo) URL, 方法, 和其他參數(shù)

send(content) 發(fā)送請(qǐng)求

setRequestHeader("label", "value") 設(shè)置header并和請(qǐng)求一起發(fā)送 ('post'方法一定要 )

XMLHttpRequest 對(duì)象屬性描述

onreadystatechange 狀態(tài)改變的事件觸發(fā)器，readyState 對(duì)象狀態(tài)(integer):

0 = 未初始化 1 = 讀取中 2 = 已讀取 3 = 交互中 4 = 完成

responseText 服務(wù)器進(jìn)程返回?cái)?shù)據(jù)的文本版本

responseXML 服務(wù)器進(jìn)程返回?cái)?shù)據(jù)的兼容DOM的XML文檔對(duì)象  

responseBody 服務(wù)器返回的主題（非文本格式）

responseStream 服務(wù)器返回的數(shù)據(jù)流

status 服務(wù)器返回的狀態(tài)碼, 如：404 = "文件末找到" 、200 ="成功"

statusText 服務(wù)器返回的狀態(tài)文本信息

2、JavaScript

JavaScript是一在瀏覽器中大量使用的編程語言。

3、DOM Document Object Model。

DOM是給 HTML 和 XML 文件使用的一組 API。它提供了文件的結(jié)構(gòu)表述，讓你可以改變其中的內(nèi)容及可見物。其本質(zhì)是建立網(wǎng)頁與 Script 或程序語言溝通的橋梁。所有WEB開發(fā)人員可操作及建立文件的屬性、方法及事件都以對(duì)象來展現(xiàn)（例如，document 就代表“文件本身“這個(gè)對(duì)像， table 對(duì)象則代表 HTML 的表格對(duì)象等等）。這些對(duì)象可以由當(dāng)今大多數(shù)的瀏覽器以 Script 來取用。一個(gè)用HTML或XHTML構(gòu)建的網(wǎng)頁也可以看作是一組結(jié)構(gòu)化的數(shù)據(jù)，這些數(shù)據(jù)被封在DOM（Document Object Model）中，DOM提供了網(wǎng)頁中各個(gè)對(duì)象的讀寫的支持。

4、XML

可擴(kuò)展的標(biāo)記語言（Extensible Markup Language）具有一種開放的、可擴(kuò)展的、可自描述的語言結(jié)構(gòu)，它已經(jīng)成為網(wǎng)上數(shù)據(jù)和文檔傳輸?shù)臉?biāo)準(zhǔn)。

5、綜合

Ajax引擎，實(shí)際上是一個(gè)比較復(fù)雜的JavaScript應(yīng)用程序，用來處理用戶請(qǐng)求，讀寫服務(wù)器和更改DOM內(nèi)容。JavaScript的Ajax引擎讀取信息，并且互動(dòng)地重寫DOM，這使網(wǎng)頁能無縫化重構(gòu)，也就是在頁面已經(jīng)下載完畢后改變頁面內(nèi)容，這是我們一直在通過JavaScript和DOM在廣泛使用的方法，但要使網(wǎng)頁真正動(dòng)態(tài)起來，不僅要內(nèi)部的互動(dòng)，還需要從外部獲取數(shù)據(jù)，在以前，我們是讓用戶來輸入數(shù)據(jù)并通過DOM來改變網(wǎng)頁內(nèi)容的，但現(xiàn)在，XMLHTTPRequest，可以讓我們?cè)诓恢剌d頁面的情況下讀寫服務(wù)器上的數(shù)據(jù)，使用戶的輸入達(dá)到最少。

Ajax使WEB中的界面與應(yīng)用分離（也可以說是數(shù)據(jù)與呈現(xiàn)分離），而在以前兩者是沒有清晰的界限的，數(shù)據(jù)與呈現(xiàn)分離的分離，有利于分工合作、減少非技術(shù)人員對(duì)頁面的修改造成的WEB應(yīng)用程序錯(cuò)誤、提高效率、也更加適用于現(xiàn)在的發(fā)布系統(tǒng)。也可以把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利于客戶端閑置的處理能力來處理。

四、應(yīng)用

Ajax理念的出現(xiàn)，揭開了無刷新更新頁面時(shí)代的序幕，并有代替?zhèn)鹘y(tǒng)web開發(fā)中采用form(表單)遞交方式更新web頁面的趨勢(shì)。

五、Ajax的優(yōu)勢(shì)

1、減輕服務(wù)器的負(fù)擔(dān)。因?yàn)锳jax的根本理念是“按需取數(shù)據(jù)”，所以最大可能在減少了冗余請(qǐng)求和響影對(duì)服務(wù)器造成的負(fù)擔(dān)；

2、無刷新更新頁面，減少用戶實(shí)際和心理等待時(shí)間；

3、也可以把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利于客戶端閑置的處理能力來處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和帶寬租用成本；

4、Ajax使WEB中的界面與應(yīng)用分離（也可以說是數(shù)據(jù)與呈現(xiàn)分離）；

作者：黑馬程序員前端與移動(dòng)開發(fā)培訓(xùn)學(xué)院
首發(fā)：http://cloud.itheima.cn/