ajax入門簡介

 

1、Ajax的簡介

ajax的英文全稱是「Asynchronous Javascript and XML」，即異步Javascript和XML。Ajax的核心技術理念在於使用XMLHttpRequest對象發送異步請求。最初爲XMLHttpRequest對象提供瀏覽器支持的是微軟公司。是一種用來開發交互性網頁的技術，其自己由多種技術組成。

一、ajax的工做原理，首先咱們看下傳統網絡應用模型：

 

圖1 傳統網絡應用模型

下面是ajax風格的通訊流

 

圖2 ajax風格的通訊流

使用Ajax能夠帶來的好處有如下幾方面。

1．              減輕服務器的負擔。Ajax的原則是「按需取數據」，能夠最大程度地減小冗餘請求，減輕服務器的負擔。

2．              無需刷新頁面，減小用戶心理和實際的等待時間。特別是在讀取大量數據時，不會像刷新頁面那樣出現白屏的狀況，Ajax使用XMLHttpRequest對象發送請求而且獲得服務器響應，在不從新載入整個頁面的狀況下，用JavaScript操做DOM更新頁面。所以在讀取數據的過程當中，用戶所面對的不是白屏，是原來的頁面內容（也能夠加一個「Loading」的提示框讓用戶知道目前正在讀取數據），只有在數據接收完畢以後才更新相應部分的內容。這種更新是瞬間的，用戶幾乎感受不到。

3．              帶來更好的用戶體驗。

4．              能夠把之前一些服務器負擔的工做轉嫁到客戶端，利用客戶端閒置的能力來處理，減輕服務器負擔，充分利用帶寬資源，節約空間和寬帶租用成本。

5．              能夠調用外部數據。

6．              基於標準化的並被普遍支持的技術，不須要下載插件或者小程序。

7．              進一步促進頁面呈現與數據的分離。

 

2、ajax的核心—XMLHttpRequest (XHR)

Ajax應用的特色之一就是無需刷新頁面便可向服務器傳輸或者讀寫數據（又稱無刷新更新頁面），這一特色主要得益於XMLHttpRequest對象。這樣就能夠像桌面應用程序同樣，只同服務器進行數據層面的交換，而不用每次都刷新界面，也不用每次將數據處理的工做提交給服務器來作。這樣既減輕了服務器的負擔又加快了響應速度、縮短了用戶等候的時間。

坦率的講，Ajax並非什麼新鮮玩藝。也就是說，Ajax並非一種全新的技術，而更像一種技巧，是把過去的幾種技術巧妙結合的技巧。真正與Ajax相關的新名詞應該是XMLHttpRequest――一個最先在IE 5中出現，最近開始在多數瀏覽器獲得支持的用來實現異步通訊的對象。正如前面所說，B/S模式是利用瀏覽器做爲其通用的客戶端，因此要想異步通信成爲可能，必需要獲得瀏覽器的支持。若是不是有了瀏覽器對XMLHttpRequest對象的普遍支持，咱們可能不會看到Ajax的今天，更不會看到許多對Ajax的著名應用，如Google Map，Google Suggest，Ta-da List等。

       Ajax的處理過程是怎樣的呢？下圖爲Ajax應用的標準處理模式：

XHR

事件

Function callback() {//……}

服務器資源

1

2

6

3

5

4

圖 3 標準Ajax處理過程

下表是XHR的方法和屬性：

表 1 標準XMLHttpRequest方法

 

方       法	說       明
abort() getAllResponseHeader() getResponseHeader("Header") open("method", "url") send(content) setRequestHeader("header", "value")	中止當前請求 把 HTTP請求的全部響應頭部做爲鍵/值對返回 返回指定首部的串值 創建對服務器的調用 向服務器發送請求 把指定首部設置爲所提供的值

 

 

表 2 標準XMLHttpRequest屬性

 

屬     性	說           明
onreadystatechange readyState   responseText responseXML status statusText	每一個狀態改變都會觸發這個事件處理器 請求的狀態： 0－未初始化，1－正在加載，2－已加載，3－交互中，4－完成 服務器的響應，表示爲一個文本字符串值 服務器的響應，表示爲一個 XML 服務器的 HTTP狀態碼 HTTP狀態碼的相應文本

 

利用XMLHttpRequest對象發送簡單請求

建立了 XMLHttpRequest對象，並瞭解了XMLHttpRequest對象的方法和屬性以後，讓咱們來看看怎樣利用XMLHttpRequest對象發送簡單的請求。利用XMLHttpRequest對象發送簡單請求的基本步驟以下：

1） 建立 XMLHttpRequest對象實例。

2） 設定 XMLHttpRequest對象的回調函數，利用onreadystatechange屬性。

3） 設定請求屬性：設定 HTTP方法（GET或POST）；設定目標URL。利用open()方法。

將請求發送給服務器。利用 send()方法。