Ajax的工作原理__Ajax

來源:互聯網
上載者:User

使用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中的介面與應用分離(也可以說是資料與呈現分離);

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.