AJAX核心 XMLHttpRequest 物件

2021-09-01 01:21:29 字數 4638 閱讀 9914

我要說的內容都是非常基礎的內容,老手就免看了,如果看了歡迎給點意見啊。新手或者對低層還不是很了解的人可以看看,幫助理解與記憶。

xmlhttprequest 物件是ajax功能的核心,要開發ajax程式必須從了解xmlhttprequest 物件開始。

先看看ie建立 xmlhttprequest 物件的要領(要領 1):

var xmlhttp = new activexobject("msxml2.xmlhttp"); //運用較新版本的 ie 建立 ie 相容的物件(msxml2.xmlhttp)

var xmlhttp = new activexobject("microsoft.xmlhttp"); //運用較老版本的 ie 建立 ie 相容的物件(microsoft.xmlhttp)

實際上internet exp lorer 運用了乙個名為 xmlhttp 的物件,而不是 xmlhttprequest 物件,而 mozilla、opera、safari 和 大部分非 microsoft 閱讀器都運用的是後者(下文統稱 xmlhttprequest 物件)。ie7開始也開始運用 xmlhttprequest 物件了。

在建立 xmlhttprequest 物件的時候如果不同的閱讀器運用了不正確的要領閱讀器都將會報錯,並且不能運用該物件。所以我們須要一種可以相容不同閱讀器的建立 xmlhttprequest 物件的要領:

建立相容多閱讀器的 xmlhttprequest 物件要領

var xmlhttp = false; //建立乙個新變數 request 並賦值 false。運用 false 作為判斷條件,它表示還沒有建立 xmlhttprequest 物件。

}判斷能不能建立成功就很基本了

建立好了xmlhttprequest 物件我們再來看看這個物件的要領、屬性以及最主要的onreadystatechange事件控制代碼吧。

要領:open() 說明:原始化 http 請求引數,例如 url 和 http 要領,但是並不傳送請求。

abort() 說明:取消當前響應,關上連線並且結束任何未決的網路活動。

getallresponseheaders() 說明:把 http 響應頭部作為未分析的字串返回。

getresponseheader() 說明:返回指定的 http 響應頭部的值。

send() 說明:傳送 http 請求,運用傳遞給 open() 要領的引數,以及傳遞給該要領的可選請求體。

setrequestheader() 說明:向乙個開啟但未傳送的請求配置或新增乙個 http 請求。

屬性:readystate 說明:http 請求的狀態。

responsetext 說明:目前為止為伺服器接收到的響應體(不包括頭部),或者如果還沒有接收到資料的話,就是空字串。

respon***ml 說明:對請求的響應,分析為 xml 並作為 document 物件返回。

status 說明:由伺服器返回的 http 狀態**。

statustext 說明:這個屬性用名稱而不是數字指定了請求的 http 的狀態**。

onreadystatechange 是每次 readystate 屬性改動的時候呼叫的事件控制代碼函式。

下面從傳送請求並處理請求結果的流程來理解一下xmlhttprequest 物件吧。

傳送請求之前自然就是生成乙個xmlhttprequest 物件,**上面有了就不多寫了。

生成乙個xmlhttprequest 物件

建立好xmlhttprequest 物件了,那我們要送請求到哪個站點呢,就選擇首頁的rss吧。那如何配置我要請求的站點位址呢,運用 open()要領。

open(method, url, async, username, password)

該要領有5個引數,具體什麼意思可以看這裡:

我們用的就是這個了。

get引數表示用get要領,第二個自然就是目標位址,首頁,第三個就是表示能不能非同步了,我們當然運用 true了。具體的引數說明還都可以到上面看了。

好了,目標定好了,如何傳送呢。用send()要領。

send(body),send()要領只有乙個引數,表示dom物件,這個dom物件須要說明的內容很多,下次說,今天我們只要寫

就可以了。好了,傳送了,那如何處理返回的結果呢,這個時候就用到xmlhttprequest 物件最主要的東西了,那就是onreadystatechange事件控制代碼。什麼意思呢,那就須要說明一下xmlhttprequest 物件的readystate了,readystate有5種狀態,分別用數字的 0 到 4 來表示。

狀態 名稱 描述

0 uninitialized 原始化狀態。xmlhttprequest 物件已建立(未呼叫open()之前)或已被 abort() 要領重置。

1 open open() 要領已呼叫,但是 send() 要領未呼叫。請求還沒有被傳送。

2 sent send() 要領已呼叫,http 請求已傳送到 web 伺服器。未接收到響應。

3 receiving 所有響應頭部都已經接收到。響應體開始接收但未完成。

4 loaded http 響應已經完全接收。

但是須要留心的是,onreadystatechange事件控制代碼不同的閱讀器能處理的狀態並不一致,ie和firefox能處理1到4,而safari能處理2到4的狀態,opera 能處理3、4兩中狀態。0的狀態基本沒什麼用,因為建立了xmlhttprequest 物件後都會馬上呼叫open() 要領,這時候狀態就變成1了,當然除非你要判斷物件能不能已經被 abort() 取消,可是這樣的情況依然很少。大部分情況下判斷是不是4(已經接受完成)這個狀態就夠了。

好了,明白了readystate有5種狀態了,那處理返回結果就是看狀態變更到不同的狀態我們做不同的處理就可以了,如何告訴xmlhttprequest 物件狀態變化時讓誰來處理這個變化呢。有兩種寫法,一種是用匿名要領,另一種是指定要領,其實只是不同的寫發,作用都一樣,看下**:

//或者

//順便說一下,控制代碼的名稱比較長,可以這樣記憶 on readystate change 表示在讀取狀態改動時

請求傳送了,也指定處理要領了,如何獲取返回的內容呢,有responsetext和respon***ml兩個屬性可供運用,respon***ml是返回物件,須要再分析,後面再說,這裡先用responsetext,看看返回什麼。

alert(xmlhttp.responsetext); //看看是不是返回了首頁的html**啊。是你就成功了。

整個流程是:建立 xmlhttprequest 物件 -> 指定傳送位址及傳送要領 -> 傳送請求 -> 指定處理要領並處理返回結果。但是須要留心,我們正常的思路理解是這樣的,可是onreadystatechange事件控制代碼指定處理要領須要在傳送之前就指定好,否則不能處理狀態變化事件。

所以我們應該按照下面的流程來記憶:建立 xmlhttprequest 物件 -> 指定傳送位址及傳送要領 -> 指定狀態變化處理要領 -> 傳送請求,請求傳送後狀態變化了就會自動呼叫指定的處理要領。

好了,看看完成的**吧。

完成的**

var xmlhttp = false; //建立乙個新變數 request 並賦值 false。運用 false 作為判斷條件,它表示還沒有建立 xmlhttprequest 物件。

}看似一切都ok了,可是有沒有想過,如果html**在網路傳輸流程中出錯了,或者我們指定的位址失效會如何樣呢。這個時候就須要用到status屬性,即由伺服器返回的 http 狀態**。 xmlhttp.status 等於200時表示傳輸流程完整沒有不正確。具體的http狀態**什麼意思可以到w3c組織站點上看看,位址 。

把getresult()要領寫成下面這樣我覺的就真的ok了。

function getresult()

}好了,乙個本來挺基本的東西,被我寫的這麼多,好象很羅嗦。不過我覺的程式設計對基礎內容的理解很主要,現在很多時候開發ajax的程式都運用很多js的庫,不須要直接編寫這麼基礎的**。如運用著名的jquery,但是如果我們對基礎的東西有很好的理解,那這些庫報告不正確 ,或者出現疑問我們可以很好很快的知道錯在**,更快的做出改動使程式正常執行。

Ajax核心 XMLHttpRequest物件

xmlhttprequest 物件是ajax功能的核心,學習xmlhttprequest物件就先從建立xmlhttprequest 物件開始,了解在不同的瀏覽器中建立xmlhttprequest 物件使用不同的方法 以前只是聽說有些瀏覽器不太支援ajax,後來瀏覽器逐漸的相容了這個瀏覽器,現在來看明...

Ajax的核心 XMLHttpRequest 物件

所有現代瀏覽器 chrom ie7 firefox safari 以及 opera 都有內建的 xmlhttprequest 物件。建立 xmlhttprequest 的語法是 variable new xmlhttprequest 老版本的 internet explorer ie5 和 ie6 ...

Ajax技術的核心XMLHttpRequest物件

以下簡稱 xhr 為伺服器傳送請求和解析伺服器響應提供了流暢的介面。能夠以非同步的方式從伺服器獲得更多資訊,意味著使用者單擊後不用重新整理頁面也可以取得新資料。也就是說,ajax技術中使用xhr物件取得新資料,再通過dom將新資料插入頁面中。xhr.open 要傳送的請求型別 請求的url 是否非同...