1.XMLHttpRequest對象
XMLHttpRequest對象在大部分瀏覽器上已經實現而且擁有一個簡單的介面允許資料從用戶端傳遞到服務端,但並不會打斷使用者當前的操作。使用XMLHttpRequest傳送的資料可以是任何格式,雖然從名字上建議是XML格式的資料。
XMLHttpRequest最早是在IE5中以ActiveX組件的形式實現的。非W3C標準。建立XMLHttpRequest對象(由於非標準所以實現方法不統一)。Internet Explorer把XMLHttpRequest實現為一個ActiveX對象其他瀏覽器(Firefox、Safari、Opera…)把它實現為一個本地的JavaScript對象。
XMLHttpRequest在不同瀏覽器上的實現是相容的,所以可以用同樣的方式訪問XMLHttpRequest執行個體的屬性和方法,而不論這個執行個體建立的方法是什麼。
XMLHttpRequest對象方法
方法 |
描述 |
abort() |
停止當前請求 |
getAllResponseHeaders() |
把http請求的所有響應首部作為鍵/值對返回 |
getResponseHeader("headerLabel") |
返回指定首部的串值 |
open(method,url,async) |
規定請求的類型、URL 以及是否非同步處理請求。 method:請求的類型;GET 或 POST url:檔案在伺服器上的位置 async:true(非同步)或 false(同步) |
send(content) |
向伺服器發送請求 |
setRequestHeader("label", "value") |
把指定首部設定為所提供的值。在設定任何首部之前必須先調用open() |
XMLHttpRequest對象屬性
2.發送請求--方法和屬性介紹
利用XMLHttpRequest執行個體與伺服器進行通訊包含以下3個關鍵區段:onreadystatechange事件處理函數、open 方法、send 方法 。
onreadystatechange:
該事件處理函數由伺服器觸發,而不是使用者;在 Ajax 執行過程中,伺服器會通知用戶端當前的通訊狀態。這依靠更新 XMLHttpRequest 對象的 readyState 來實現。改變 readyState 屬性是伺服器對用戶端串連操作的一種方式。每次 readyState 屬性的改變都會觸發 readystatechange事件。
open(method, url, asynch):
XMLHttpRequest 對象的 open 方法允許程式員用一個Ajax調用向伺服器發送請求。method:請求類型,類似 “GET”或”POST”的字串。若只想從伺服器檢索一個檔案,而不需要發送任何資料,使用GET(可以在GET請求裡通過附加在URL上的查詢字串來發送資料,不過資料大小限制為2000個字元)。若需要向伺服器發送資料,用POST。在某些情況下,有些瀏覽器會把多個XMLHttpRequest請求的結果緩衝在同一個URL。如果對每個請求的響應不同,這就會帶來不好的結果。把目前時間戳追加到URL的最後,就能確保URL的惟一性,從而避免瀏覽器緩衝結果。比如:
var url = "GetExample?timeStamp=" + new Date().getTime();
url:路徑字串,指向你所請求的伺服器上的那個檔案。可以是絕對路徑或相對路徑。asynch:表示請求是否要非同步傳輸,預設值為true(非同步)。指定true,在讀取後面的指令碼之前,不需要等待伺服器的相應。指定false,當指令碼處理過程經過這點時,會停下來,一直等到Ajax請求執行完畢再繼續執行。
send(data):
open 方法定義了 Ajax 請求的一些細節。send 方法可為已經待命的請求發送指令data:將要傳遞給伺服器的字串。若選用的是 GET 請求,則不會發送任何資料, 給 send 方法傳遞 null 即可:request.send(null);當向send()方法提供參數時,要確保open()中指定的方法是POST,如果沒有資料作為請求體的一部分發送,則使用null.
setRequestHeader(header,value)
當瀏覽器向伺服器請求頁面時,它會伴隨這個請求發送一組首部資訊。這些首部資訊是一系列描述請求的中繼資料(metadata)。首部資訊用來聲明一個請求是 GET 還是 POST。
Ajax 請求中,發送首部資訊的工作可以由setRequestHeader完成.參數header:首部的名字; 參數value:首部的值。如果用 POST 請求向伺服器發送資料,需要將 “Content-type” 的首部設定為 “application/x-www-form-urlencoded”.它會告知伺服器正在發送資料,並且資料已經符合URL編碼了。該方法必須在open()之後才能調用.
3. 接收--方法和屬性介紹
用 XMLHttpRequest 的方法可向伺服器發送請求。在 Ajax 處理過程中,XMLHttpRequest 的如下屬性可被伺服器更改:readyState
status、responseText、responseXML。
status
伺服器發送的每一個響應也都帶有首部資訊。三位元的狀態代碼是伺服器發送的響應中最重要的首部資訊,並且屬於超文字傳輸通訊協定 (HTTP)中的一部分。
常用狀態代碼及其含義:
404沒找到頁面(notfound)
403禁止訪問(forbidden)
500內部伺服器出錯(internalservice error)
200一切正常(ok)
304沒有被修改(notmodified)(伺服器返回304狀態,表示源檔案沒有被修改)
在XMLHttpRequest 對象中,伺服器發送的狀態代碼都儲存在 status 屬性裡。通過把這個值和 200 或 304 比較,可以確保伺服器是否已發送了一個成功的響應
responseText
XMLHttpRequest 的 responseText 屬性包含了從伺服器發送的資料。它是一個HTML,XML或普通文本,這取決於伺服器發送的內容。
當 readyState 屬性值變成 4 時, responseText 屬性才可用,表明 Ajax 請求已經結束。
responseXML
如果伺服器返回的是 XML, 那麼資料將儲存在 responseXML 屬性中。只用伺服器發送了帶有正確首部資訊的資料時,responseXML 屬性才是可用的。 MIME 類型必須為 text/xml
AJAX開發架構
AJAX實質上也是遵循Request/Server模式,所以這個架構基本的流程是:對象初始化、發送請求、伺服器接收、伺服器返回、用戶端接收、修改用戶端頁面內容。只不過這個過程是非同步。