1. 程式人生 > >Ajax基礎知識

Ajax基礎知識

Ajax 的基本概念:

Ajax (Asynchronous JavaScript And XML)指的是非同步JavaSeript 和XML技術,Web 2.0中的一項關鍵技術, 它允許把使用者和Web頁面間的互動與Web瀏覽器和服方磁間的通訊分離開來。 Ajax並不是種新的程式語言, 而是一種建立互動性更強的Web應用程式的技個。有了Ajax,開發者編寫的JavaScript便可以在不過載頁面的情況下實現與Web伺服器的資料交換。Ajax在瀏覽器與Web伺服器之間使用了非同步資料傳輸,從而減少了網頁問伺服器請求的資訊量,使得每次請求並不需要返回整個頁面。

 Ajax的基本原理:

與傳統的 Web應用相比,Ajax技術採用了非同步互動過程。它在使用者和伺服器之間引入了一箇中間媒介,這個中間媒介相當於在使用者上服務間增加了一箇中間層,使使用者與伺服器的響應非同步化。通過這樣的設定便可以把之前由伺服器完成的部分工作轉交到各戶端完成,充分利用客戶端閒置的處理能力,減輕伺服器的負擔,節省了頻寬。 實際上,使用者的瀏覽器在執行任務時即裝載了Ajax引擎。Ajax引擎是使用JavaScnipt語言編寫的,通常位於一個隱藏的框架中,它負責編譯使用者介面和伺服器之間的互動。有了Ajax引擎,使用者與應用軟體之間的互動便可以非同步進行,獨立於使用者與伺服器之間的父互過程。通過Ajax引擎,頁面導航、資料校驗等此不需要重新載入完整頁面的需求就可以交給Ajax來執行。

Ajax之XMLHttpRequest:

是Ajax的核心部分,它可以在不重新載入頁面的條件下完成對頁面的更新,可以在頁面載入後從客戶端向伺服器請求資料以及在伺服器端接收資料,還可以在後臺向客戶端傳送資料。XMLHttpRequest物件實現了HTTP協議的完全訪問,可以實現同步或非同步返回Web伺服器的響應。並以文字形式或DOM文件形式返回響應內容。

在使用XMLHttpRequest物件傳送請送請求和處理響應之前,必須先使用JavaScript建立一個XMLHttpRequest物件。

建立XMLHttpRequest物件:

var xmlhttp;
function createXMLHttpRequest(){  
     if(window.XMLHttpRequest){  
        // code for IE7+, Firefox, Chrome, Opera, Safari
         xmlHttp = new XMLHttpRequest();   
     }else if(window.ActiveXObject){  
        // code for IE6, IE5
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
     }  
}

XMLHttpRequest物件的屬性:

屬性 說明
onreadystatechange 當readyState屬性發生變化時觸發此事件,用於觸發回撥函式。
status 伺服器返回http狀態碼
statusText 伺服器返回狀態碼的文字資訊
responseText 包含客戶端接收到的HTTP相應的文字內容
responseXML 伺服器響應的XML內容對應的DOM物件
readyState 請求狀態

(1) readyState 屬性 該屬性代表請求的狀態,當XMLHttpRequest物件把一一個 HTTP請求傳送到伺服器端時,會經歷若狀態,一直等待直到請求被處理,然後再接收一個響應,這樣指令碼才能正確地響應各種狀態,XMLHttpRequest 物件的readyState屬性值下表所示。

readyState屬性值:

readyState屬性值 名稱 說明
0 Uninitialized 初始化狀態。XMLHttpRequest 物件已建立或已被 abort() 方法重置。
1 Open open() 方法已呼叫,但是 send() 方法未呼叫。請求還沒有被髮送。
2 Send Send() 方法已呼叫,HTTP 請求已傳送到 Web 伺服器。未接收到響應。
3 Receiving 所有響應頭部都已經接收到。響應體開始接收但未完成。
4 Loaded HTTP 響應已經完全接收。

(2)onreadystatechange屬性

該屬性是readyState屬性值改變時的事件觸發器,用來指定當readyState屬性值改變時的處理事件。在使用時,常常以事件處理函式名稱賦予onreadystatechange的方式,來為XMLHttpRequest指定事件處理器,在事件處理函式中通過判斷readyState狀態值做出相應的處理。 (3) responseText屬性 該屬性包含接收到的HTTP響應的文字內容,當readyState值為0、1、 2時,該屬機值為一個空字串。當readyState值為3時,該屬性值包含客戶端中未完成的響應資訊,當readySlate值為4時,該屬性值包含完整的響應資訊。 (4) responseXML屬性 讀屬性包含接收的HTP響應的XML內容。當伺服器以XML文件的格式返回響應資料時,rsponseXML屬性值才不為null。(5) status 屬任 status屬性描述了HTTP狀態程式碼,僅僅當readyState值為3或4時該屬性才有效,當radyState值小於3時,試圖存取status的值將會引發一個異常。 (6) statusText屬性 該屬性描述了HTTP狀態程式碼文字,僅僅當readyState值為3或4時該屬性才有效,當readyState值小於3時,試圖存取status的值將會引發一個 異常。

下面來介紹XMLHttpRequest物件的方法。 XMLHtpRequst物件提供了包括send()、open()在內的6種方法,用來向伺服器傳送HTTP請求,並設定相應的頭資訊,下表列出了XMLHttpRequest物件提供的方法及其說明。

XMLHttpRequest物件的方法:

方法 說明
Abort() 停止當前請求
getAllResponseHeaders() 將HTTP請求的所有響應首部作為key-value對返回
getResponseHeader() 返回指定首部的值
open() 建立對伺服器的呼叫
send() 向伺服器傳送請求
setRequestHeader() 把指定首部設定為所提供的值

(7) abort()方法 該方法用來暫停與XMLHttpRequest物件相聯絡的HTTP請求,從而把沒物件復位到未初始化狀態

(8) open(DOMString  method,DOMString  uri,Boolean async,DOMString username,DOMString password)方法

該方法用來初始化一個XMLHttpRequest物件,其中,method 引數用於指定傳送請求的HTTP方法(可以是GET方法、POST方法、PUT方法、DELETE方法或HEAD方法)。如果想將資料傳送到伺服器,則應該使用POST方法。如果想從伺服器端檢索資料,則應該使用GET放法。open 方法中的uri引數用於指定XMLHttpRequest物件把請求傳送到與伺服器相應的URI。async 引數指定了請求是否是非同步的,其預設值是true.如果想傳送一個同步請求,則需要把這個值設定為false. 在呼叫open()方法後XMLHttpRequest物件會將它的readyState屬性設定為1, 並且把responseText、responseXML、status和statusText屬性設定為它們的初始值。

(9) send()方法 在呼叫open()方法準備好一個請求後, 還需要把該請求傳送到伺服器,這時就需要呼叫send()方法。 send()方法中包含了一個可 選的引數,該引數可以包含可變型別的資料。 (10)setRequestHeader(DOMString header,DOMString value)方法 該方法用來設定請求的頭部資訊。其中,header引數表示要設定的首部,value 引數表 示要設定的值。該方法的呼叫必須在呼叫open()方法之後。

(11) getResponseHeader(DOMstring header)方法 該方法用來得到首部資訊,其中header引數表示要得到的首部。該方法僅當readyState 值是3或4時才可呼叫,否則會返回一一個空字串。 (12)getAllResponseHeaders0方法  屬性值必須為3或4.否則該方法將該方法用來得到所有的響應首部,此時readyState返回null值。

下一篇講Ajax的基本用法。