XMLHttpRequest對象,xmlhttprequest

來源:互聯網
上載者:User

XMLHttpRequest對象,xmlhttprequest

1.XMLHttpRequest對象   

      (1)XMLHttpRequest是XMLHTTP組件的對象,通過這個對象,AJAX可以像傳統型應用程式一樣只同伺服器進行資料層面的交換,而不用每次都重新整理介面,也不用每次將資料處理的工作都交給伺服器來做;這樣既減輕了伺服器負擔又加快了響應速度、縮短了使用者等待的時間。 

      (2)XMLHttpRequest最早是在IE5中以ActiveX組件的形式實現的。非W3C標準。
建立XMLHttpRequest對象(由於非標準所以實現方法不統一)
Internet Explorer把XMLHttpRequest實現為一個ActiveX對象
其他瀏覽器(Firefox、Safari、Opera…)把它實現為一個本地的JavaScript對象。

XMLHttpRequest在不同瀏覽器上的實現是相容的,所以可以用同樣的方式訪問XMLHttpRequest執行個體的屬性和方法,而不論這個執行個體建立的方法是什麼。

2.XMLHttpRequest對象初始化

function createXHR() {var xmlHttp;try {// Firefox, Opera 8.0+, Safari瀏覽器xmlHttp = new XMLHttpRequest();} catch (e) {// IE瀏覽器try {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {try {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");} catch (e) {alert("您的瀏覽器不支援AJAX!");return false;}}}}
3.XMLHttpRequest對象方法 


4.XMLHttpRequest對象屬性


5.onreadystatechange對象屬性:
      該事件處理函數由伺服器觸發,而不是使用者
在 Ajax 執行過程中,伺服器會通知用戶端當前的通訊狀態。這依靠更新 XMLHttpRequest 對象的 readyState 來實現。改變 readyState 屬性是伺服器對用戶端串連操作的一種方式。
每次 readyState 屬性的改變都會觸發 readystatechange事件

xmlHttp.onreadystatechange=function()  {  // 我們需要在這裡寫一些代碼  }

6.readystate屬性:

狀態 描述
0 請求未初始化(在調用 open() 之前)
1 請求已提出(調用 send() 之前)
2 請求已發送(這裡通常可以從響應得到內容標題部)
3 請求處理中(響應中通常有部分資料可用,但是伺服器還沒有完成響應)
4 請求已完成(可以訪問伺服器響應並使用它)
畫圖理解各種狀態:


7.open(method, url, asynch)方法
      XMLHttpRequest 對象的 open 方法允許程式員用一個Ajax調用向伺服器發送請求。
    method:請求類型,類似 “GET”或”POST”的字串。若只想從伺服器檢索一個檔案,而不需要發送任何資料,使用GET(可以在GET請求裡通過附加在URL上的查詢字串來發送資料,不過資料大小限制為2000個字元)。若需要向伺服器發送資料,用POST。
      在某些情況下,有些瀏覽器會把多個XMLHttpRequest請求的結果緩衝在同一個URL。如果對每個請求的響應不同,這就會帶來不好的結果。把目前時間戳追加到URL的最後,就能確保URL的惟一性,從而避免瀏覽器緩衝結果。 

var url = "/FirstAjax/CityServlet?time="+new Date().getTime()+"&province="+province
url:路徑字串,指向你所請求的伺服器上的那個檔案。可以是絕對路徑或相對路徑。
asynch:表示請求是否要非同步傳輸,預設值為true(非同步)。指定true,在讀取後面的指令碼之前,不需要等待伺服器的相應。指定false,當指令碼處理過程經過這點時,會停下來,一直等到Ajax請求執行完畢再繼續執行。

8.send(data)方法:
open 方法定義了 Ajax 請求的一些細節。send 方法可為已經待命的請求發送指令
data:將要傳遞給伺服器的字串。
    若選用的是 GET 請求,則不會發送任何資料, 給 send 方法傳遞 null 即可:request.send(null);如果傳值的話,伺服器也收不到。
當向send()方法提供參數時,要確保open()中指定的方法是POST,如果沒有資料作為請求體的一部分發送,則使用null.

9.setRequestHeader(header,value)方法:

當瀏覽器向伺服器請求頁面時,它會伴隨這個請求發送一組首部資訊。這些首部資訊是一系列描述請求的中繼資料(metadata)。首部資訊用來聲明一個請求是 GET 還是 POST。
Ajax 請求中,發送首部資訊的工作可以由 setRequestHeader完成
參數header: 首部的名字;  參數value:首部的值。
如果用 POST 請求向伺服器發送資料,需要將 “Content-type” 的首部設定為 “application/x-www-form-urlencoded”.它會告知伺服器正在發送資料,並且資料已經符合URL編碼了。
該方法必須在open()之後才能調用
完整的 Ajax 的 POST 請求樣本:

           //準備以POST方式發送請求
xhr.open("post","/FirstAjax/PostServlet?time="+new Date().getTime());
//佈建要求頭,只有是POST方式下,才設定該要求標頭
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
//真正發送請求
xhr.send("username="+username);

10.接收方法和屬性

用 XMLHttpRequest 的方法可向伺服器發送請求。在 Ajax 處理過程中,XMLHttpRequest 的如下屬性可被伺服器更改:
readyState
status
responseText
responseXML

(1).readyState

readyState 屬性工作表示Ajax請求的目前狀態。它的值用數字代表(前面的表格中的[0-4]數值)

    每次 readyState 值的改變,都會觸發 readystatechange 事件。如果把 onreadystatechange 事件處理函數賦給一個函數,那麼每次 readyState 值的改變都會引發該函數的執行。
readyState 值的變化會因瀏覽器的不同而有所差異。但是,當請求結束的時候,每個瀏覽器都會把 readyState 的值統一設為 4

(2)status
伺服器發送的每一個響應也都帶有首部資訊。三位元的狀態代碼是伺服器發送的響應中最重要的首部資訊,並且屬於超文字傳輸通訊協定 (HTTP)中的一部分。
常用狀態代碼及其含義:
404 沒找到頁面(not found)
403 禁止訪問(forbidden)
500 內部伺服器出錯(internal service error)
200 一切正常(ok)
304 沒有被修改(not modified)(伺服器返回304狀態,表示源檔案沒有被修改 )
在 XMLHttpRequest 對象中,伺服器發送的狀態代碼都儲存在 status 屬性裡。通過把這個值和 200 或 304 比較,可以確保伺服器是否已發送了一個成功的響應

(3) responseText
      XMLHttpRequest 的 responseText 屬性包含了從伺服器發送的資料.它是一個HTML,XML或普通文本,這取決於伺服器發送的內容。(將傳回的資訊當字串使用
當 readyState 屬性值變成 4 時, responseText 屬性才可用,表明 Ajax 請求已經結束。

(4)responseXML(將傳回的資訊當XML文檔使用,可以用DOM處理。)
      如果伺服器返回的是 XML, 那麼資料將儲存在 responseXML 屬性中。
只用伺服器發送了帶有正確首部資訊的資料時, responseXML 屬性才是可用的。 MIME 類型必須為 text/xml

11.AJAX開發步驟及詳解
   (1)建立ajax_1.html或ajax_1.jsp
   (2)添加事件
   (3)在事件響應後建立Ajax引擎對象
   (4)非同步發送請求
   (5)將響應結果放入Ajax引擎對象中
   (6)從Ajax引擎對象中取得響應結果
   (7)使用DOM和JS將響應結果動態添加到Html或Jsp面頁中 
   (8)對於POST請求,一定要佈建要求頭,代碼如下:
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
        在open()之後,在send()之前
     對於GET請求,無需佈建要求頭


XMLHttpRequest是什?

1、XMLHTTPRequest對象什麼是?

最通用的定義為:XmlHttp是一套可以在Javascript、VbScript、Jscript等指令碼語言中通過http協議傳送或從接收XML及其他資料的一套API。XmlHttp最大的用處是可以更新網頁的部分內容而不需要重新整理整個頁面。(這個功能正是AJAX的一大特點之一)

來自MSDN的解釋:XmlHttp提供用戶端同http伺服器通訊的協議。用戶端可以通過XmlHttp對象(MSXML2.XMLHTTP.3.0)向http伺服器發送請求並使用微軟XML文件物件模型Microsoft? XML Document Object Model (DOM)處理回應。

這裡說些題外話,其實這個東西很早就出現了,只是以前瀏覽器的支援不夠,只有IE中才支援,所以大多數的WEB程式員都沒有怎麼用他,但是現在情況發生了很大地改變,Mozilla和Safari把它採用為事實上的標準,主流的瀏覽器都開始支援XMLHTTPRequest對象了。但是這裡需要重點說明的是XMLHTTPRequest目前還不是一個W3C的標準,所以在不同的瀏覽器上表現也稍有些區別。

2、建立XMLHTTPRequest對象

說到區別,我們這裡來看看怎麼來聲明(使用)它,在使用XMLHTTPRequest對象發送請求和處理響應之前,我們必須要用javascript建立一個XMLHTTPRequest對象。(IE把XMLHTTPRequest實現為一個ActiveX對象,其他的瀏覽器[如Firefox/Safari/Opear]則把它實現為一個本地的javascript對象)。下面我們就來看看具體怎麼運用javascript來建立它吧:

以下是引用片段:

<script language="javascript" type="text/javascript">

<!--

var xmlhttp;

// 建立XMLHTTPRequest對象

function createXMLHTTPRequest(){

if(window.ActiveXObject){ // 判斷是否支援ActiveX控制項

xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // 通過執行個體化ActiveXObject的一個新執行個體來建立XMLHTTPRequest對象

}

else if(window.XMLHTTPRequest){ // 判斷是否把XMLHTTPRequest實現為一個本地javascript對象

xmlhttp = new XMLHTTPRequest(); // 建立XMLHTTPRequest的一個執行個體(本地javascript對象)

}

}

//-->

</script>3、屬性和方法

由於東西太多現在先用個頁面來列舉出說有的方法和屬性,以後再來詳細舉例(主要是本人也在學習中)。

<html>

<head>

<......餘下全文>>
 
XmlHttpRequest對象?

you are right.
 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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.