Ajax的工作原理

使用Ajax的主要原因:1、通過適當的Ajax應用達到更好的用戶體驗;2、把以前的一些服務器負擔的工作轉嫁到客戶端,利於客戶端閒置的處理能力來處理,減輕服務器和帶寬的負擔,從而達到節約ISP的空間及帶寬租用成本的目的。  

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

使用XHTML和CSS標準化呈現;

使用DOM實現動態顯示和交互;

使用XML和XSLT進行數據交換與處理;

使用XMLHttpRequest進行異步數據讀取;

最後用JavaScript綁定和處理所有數據;

工作原理

    Ajax的工作原理相當於在用戶和服務器之間加了—箇中間層,使用戶操作與服務器響應異步化。並不是所有的用戶請求都提交給服務器,像—些數據驗證和數據處理等都交給Ajax引擎自己來做, 只有確定需要從服務器讀取新數據時再由Ajax引擎代爲向服務器提交請求。

    Ajax其核心只有JavaScript、XMLHTTPRequest和DOM,在舊的交互方式中,由用戶觸發一個HTTP請求到服務器,服務器對其進行處理後再返回一個新的HTHL頁到客戶端, 每當服務器處理客戶端提交的請求時,客戶都只能空閒等待,並且哪怕只是一次很小的交互、只需從服務器端得到很簡單的一個數據,都要返回一個完整的HTML頁,而用戶每次都要浪費時間和帶寬去重新讀取整個頁面。而使用Ajax後用戶從感覺上幾乎所有的操作都會很快響應沒有頁面重載(白屏)的等待。

1、XMLHTTPRequest

    Ajax的一個最大的特點是無需刷新頁面便可向服務器傳輸或讀寫數據(又稱無刷新更新頁面),這一特點主要得益於XMLHTTP組件XMLHTTPRequest對象。

XMLHttpRequest 對象方法描述 

abort() 停止當前請求 

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

getResponseHeader("headerLabel") 作爲字符串返問單個的header標籤 

open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 設置未決的請求的目標 URL, 方法, 和其他參數 

send(content) 發送請求

setRequestHeader("label", "value") 設置header並和請求一起發送 ('post'方法一定要 )

XMLHttpRequest 對象屬性描述 

onreadystatechange 狀態改變的事件觸發器,readyState 對象狀態(integer):

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

responseText 服務器進程返回數據的文本版本 

responseXML 服務器進程返回數據的兼容DOM的XML文檔對象  

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

responseStream 服務器返回的數據流

status 服務器返回的狀態碼, 如:404 = "文件末找到" 、200 ="成功" 

statusText 服務器返回的狀態文本信息 

2、JavaScript

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

3、DOM Document Object Model。

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

4、XML

可擴展的標記語言(Extensible Markup Language)具有一種開放的、可擴展的、可自描述的語言結構,它已經成爲網上數據和文檔傳輸的標準。

5、綜合

Ajax引擎,實際上是一個比較複雜的JavaScript應用程序,用來處理用戶請求,讀寫服務器和更改DOM內容。JavaScript的Ajax引擎讀取信息,並且互動地重寫DOM,這使網頁能無縫化重構,也就是在頁面已經下載完畢後改變頁面內容,這是我們一直在通過JavaScript和DOM在廣泛使用的方法,但要使網頁真正動態起來,不僅要內部的互動,還需要從外部獲取數據,在以前,我們是讓用戶來輸入數據並通過DOM來改變網頁內容的,但現在,XMLHTTPRequest,可以讓我們在不重載頁面的情況下讀寫服務器上的數據,使用戶的輸入達到最少。

Ajax使WEB中的界面與應用分離(也可以說是數據與呈現分離),而在以前兩者是沒有清晰的界限的,數據與呈現分離的分離,有利於分工合作、減少非技術人員對頁面的修改造成的WEB應用程序錯誤、提高效率、也更加適用於現在的發佈系統。也可以把以前的一些服務器負擔的工作轉嫁到客戶端,利於客戶端閒置的處理能力來處理。

四、應用

Ajax理念的出現,揭開了無刷新更新頁面時代的序幕,並有代替傳統web開發中採用form(表單)遞交方式更新web頁面的趨勢。

五、Ajax的優勢

1、減輕服務器的負擔。因爲Ajax的根本理念是“按需取數據”,所以最大可能在減少了冗餘請求和響影對服務器造成的負擔;

2、無刷新更新頁面,減少用戶實際和心理等待時間;

3、也可以把以前的一些服務器負擔的工作轉嫁到客戶端,利於客戶端閒置的處理能力來處理,減輕服務器和帶寬的負擔,節約空間和帶寬租用成本;

4、Ajax使WEB中的界面與應用分離(也可以說是數據與呈現分離);

發佈了71 篇原創文章 · 獲贊 7 · 訪問量 57萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章