更新時間:2018-12-06 來源:黑馬程序員技術社區(qū) 瀏覽量:
Ajax的原理簡單來說通過XmlHttpRequest對象來向服務器發(fā)異步請求,從服務器獲得數(shù)據(jù),然后用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從服務器獲得請求數(shù)據(jù)
使用Ajax的主要原因:1、通過適當?shù)腁jax應用達到更好的用戶體驗;2、把以前的一些服務器負擔的工作轉嫁到客戶端,利于客戶端閑置的處理能力來處理,減輕服務器和帶寬的負擔,從而達到節(jié)約ISP的空間及帶寬租用成本的目的。
Ajax是Asynchronous JavaScript and XML的縮寫。它包括
使用XHTML和CSS標準化呈現(xiàn);
使用DOM實現(xiàn)動態(tài)顯示和交互;
使用XML和XSLT進行數(shù)據(jù)交換與處理;
使用XMLHttpRequest進行異步數(shù)據(jù)讀取;
最后用JavaScript綁定和處理所有數(shù)據(jù);
工作原理
Ajax的工作原理相當于在用戶和服務器之間加了—個中間層,使用戶操作與服務器響應異步化。并不是所有的用戶請求都提交給服務器,像—些數(shù)據(jù)驗證和數(shù)據(jù)處理等都交給Ajax引擎自己來做, 只有確定需要從服務器讀取新數(shù)據(jù)時再由Ajax引擎代為向服務器提交請求。
Ajax其核心只有JavaScript、XMLHTTPRequest和DOM,在舊的交互方式中,由用戶觸發(fā)一個HTTP請求到服務器,服務器對其進行處理后再返回一個新的HTHL頁到客戶端, 每當服務器處理客戶端提交的請求時,客戶都只能空閑等待,并且哪怕只是一次很小的交互、只需從服務器端得到很簡單的一個數(shù)據(jù),都要返回一個完整的HTML頁,而用戶每次都要浪費時間和帶寬去重新讀取整個頁面。而使用Ajax后用戶從感覺上幾乎所有的操作都會很快響應沒有頁面重載(白屏)的等待。
1、XMLHTTPRequest
Ajax的一個最大的特點是無需刷新頁面便可向服務器傳輸或讀寫數(shù)據(jù)(又稱無刷新更新頁面),這一特點主要得益于XMLHTTP組件XMLHTTPRequest對象。
XMLHttpRequest 對象方法描述
abort() 停止當前請求
getAllResponseHeaders() 作為字符串返問完整的headers
getResponseHeader("headerLabel") 作為字符串返問單個的header標簽
open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 設置未決的請求的目標 URL, 方法, 和其他參數(shù)
send(content) 發(fā)送請求
setRequestHeader("label", "value") 設置header并和請求一起發(fā)送 ('post'方法一定要 )
XMLHttpRequest 對象屬性描述
onreadystatechange 狀態(tài)改變的事件觸發(fā)器,readyState 對象狀態(tài)(integer):
0 = 未初始化 1 = 讀取中 2 = 已讀取 3 = 交互中 4 = 完成
responseText 服務器進程返回數(shù)據(jù)的文本版本
responseXML 服務器進程返回數(shù)據(jù)的兼容DOM的XML文檔對象
responseBody 服務器返回的主題(非文本格式)
responseStream 服務器返回的數(shù)據(jù)流
status 服務器返回的狀態(tài)碼, 如:404 = "文件末找到" 、200 ="成功"
statusText 服務器返回的狀態(tài)文本信息
2、JavaScript
JavaScript是一在瀏覽器中大量使用的編程語言。
3、DOM Document Object Model。
DOM是給 HTML 和 XML 文件使用的一組 API。它提供了文件的結構表述,讓你可以改變其中的內(nèi)容及可見物。其本質(zhì)是建立網(wǎng)頁與 Script 或程序語言溝通的橋梁。所有WEB開發(fā)人員可操作及建立文件的屬性、方法及事件都以對象來展現(xiàn)(例如,document 就代表“文件本身“這個對像, table 對象則代表 HTML 的表格對象等等)。這些對象可以由當今大多數(shù)的瀏覽器以 Script 來取用。一個用HTML或XHTML構建的網(wǎng)頁也可以看作是一組結構化的數(shù)據(jù),這些數(shù)據(jù)被封在DOM(Document Object Model)中,DOM提供了網(wǎng)頁中各個對象的讀寫的支持。
4、XML
可擴展的標記語言(Extensible Markup Language)具有一種開放的、可擴展的、可自描述的語言結構,它已經(jīng)成為網(wǎng)上數(shù)據(jù)和文檔傳輸?shù)臉藴省?/p>
5、綜合
Ajax引擎,實際上是一個比較復雜的JavaScript應用程序,用來處理用戶請求,讀寫服務器和更改DOM內(nèi)容。JavaScript的Ajax引擎讀取信息,并且互動地重寫DOM,這使網(wǎng)頁能無縫化重構,也就是在頁面已經(jīng)下載完畢后改變頁面內(nèi)容,這是我們一直在通過JavaScript和DOM在廣泛使用的方法,但要使網(wǎng)頁真正動態(tài)起來,不僅要內(nèi)部的互動,還需要從外部獲取數(shù)據(jù),在以前,我們是讓用戶來輸入數(shù)據(jù)并通過DOM來改變網(wǎng)頁內(nèi)容的,但現(xiàn)在,XMLHTTPRequest,可以讓我們在不重載頁面的情況下讀寫服務器上的數(shù)據(jù),使用戶的輸入達到最少。
Ajax使WEB中的界面與應用分離(也可以說是數(shù)據(jù)與呈現(xiàn)分離),而在以前兩者是沒有清晰的界限的,數(shù)據(jù)與呈現(xiàn)分離的分離,有利于分工合作、減少非技術人員對頁面的修改造成的WEB應用程序錯誤、提高效率、也更加適用于現(xiàn)在的發(fā)布系統(tǒng)。也可以把以前的一些服務器負擔的工作轉嫁到客戶端,利于客戶端閑置的處理能力來處理。
四、應用
Ajax理念的出現(xiàn),揭開了無刷新更新頁面時代的序幕,并有代替?zhèn)鹘y(tǒng)web開發(fā)中采用form(表單)遞交方式更新web頁面的趨勢。
五、Ajax的優(yōu)勢
1、減輕服務器的負擔。因為Ajax的根本理念是“按需取數(shù)據(jù)”,所以最大可能在減少了冗余請求和響影對服務器造成的負擔;
2、無刷新更新頁面,減少用戶實際和心理等待時間;
3、也可以把以前的一些服務器負擔的工作轉嫁到客戶端,利于客戶端閑置的處理能力來處理,減輕服務器和帶寬的負擔,節(jié)約空間和帶寬租用成本;
4、Ajax使WEB中的界面與應用分離(也可以說是數(shù)據(jù)與呈現(xiàn)分離);
作者:黑馬程序員前端與移動開發(fā)培訓學院
首發(fā):http://cloud.itheima.cn/