ajax入門

昵稱10504424 2013-02-18

展開(kāi)全文

5.2 Ajax基礎(chǔ)http://book.csdn.net/bookfiles/653/10065320712.shtml

在進(jìn)行Ajax開(kāi)發(fā)以前，我們必須先對(duì)一些基本的知識(shí)進(jìn)行了解。雖然Ajax.NET已經(jīng)將Ajax實(shí)現(xiàn)細(xì)節(jié)封裝起來(lái)，并大大簡(jiǎn)化了我們的操作，但是了解基本的Ajax實(shí)現(xiàn)方式對(duì)于幫助我們?cè)陂_(kāi)發(fā)中能更好理解和實(shí)施，以及更有效地優(yōu)化和排錯(cuò)是至關(guān)重要的。此外，雖然我們不必編寫具體的Ajax調(diào)用代理，但是在調(diào)用代理前獲取數(shù)據(jù)，以及返回?cái)?shù)據(jù)后怎樣使數(shù)據(jù)能夠正確顯示，這兩部分工作都需要我們具有基本的JavaScript操作DOM模型的能力。接下來(lái)我們將來(lái)對(duì)這幾方面的知識(shí)進(jìn)行討論。

5.2.1 XMLHttpRequest對(duì)象

對(duì) 于Ajax技術(shù)的基礎(chǔ)和核心，XMLHttpRequest對(duì)象應(yīng)該是我們必須要了解的一個(gè)對(duì)象，Ajax實(shí)現(xiàn)的關(guān)鍵發(fā)送異步請(qǐng)求并接收響應(yīng)執(zhí)行回調(diào)都是通過(guò)它來(lái)完成的。XMLHttpRequest最早是在Microsoft Internet Explorer 5.0以ActiveX組件中被引入的，之后各大瀏覽器廠商都以JavaScript內(nèi)置對(duì)象的方式實(shí)現(xiàn)了XMLHttpRequest對(duì)象。雖然大家對(duì) 它的實(shí)現(xiàn)方式有所區(qū)別，但是絕大多數(shù)瀏覽器都提供了類似的屬性和方法，在實(shí)際腳本編寫方法上區(qū)別不大，并且實(shí)現(xiàn)得到的效果也基本相同，目前W3C正致力于將XMLHttpRequest對(duì)象制定一個(gè)統(tǒng)一的標(biāo)準(zhǔn)使各個(gè)瀏覽器廠商遵照?qǐng)?zhí)行，以利于Ajax技術(shù)的推廣與發(fā)展。

XMLHttpRequest提供了一個(gè)相對(duì)精簡(jiǎn)易用的API，下面我們就將簡(jiǎn)單地介紹一下它所提供的屬性和方法以及怎么利用這些屬性和方法完成一次Ajax的請(qǐng)求和響應(yīng)處理。

1．readyState屬性

當(dāng)一個(gè)XMLHttpRequest對(duì)象被創(chuàng)建后，此屬性標(biāo)識(shí)了此對(duì)象正處于什么狀態(tài)，我們可以通過(guò)對(duì)此屬性的訪問(wèn)，來(lái)判斷此次請(qǐng)求的狀態(tài)是什么然后做出相應(yīng)的操作。具體此屬性的值代表的意義見(jiàn)表5-1。

表5-1

^值	^說(shuō)^明
⁰	^{未初始化狀態(tài)；此時(shí)，已經(jīng)創(chuàng)建一個(gè)}^{XMLHttpRequest}^{對(duì)象，但是還沒(méi)有初始化此對(duì)象的屬性}
¹	^{準(zhǔn)備發(fā)送狀態(tài)；此時(shí)，已經(jīng)調(diào)用了}^{XMLHttpRequest}^{對(duì)象的}^Open()^{方法，并且已經(jīng)準(zhǔn)備好將一個(gè)}^{XMLHttpRequest}^{請(qǐng)求發(fā)送到服務(wù)端}
²	^{已發(fā)送狀態(tài)；此時(shí)，已經(jīng)調(diào)用了}^{XMLHttpRequest}^{對(duì)象的}^Send()^{方法，但是并沒(méi)有收到任何響應(yīng)}
³	^{正在接收狀態(tài)；此時(shí)，已經(jīng)開(kāi)始接收}^HttpResponse^{響應(yīng)信息但是還沒(méi)有完成接收}
⁴	^{完成響應(yīng)狀態(tài)；此時(shí)，已經(jīng)完成了}^HttpResponse^{響應(yīng)的接收}

2．responseText屬性

此屬性描述的是一個(gè)HttpResponse中的全部文本內(nèi)容，通過(guò)訪問(wèn)它，可以得到一次XMLHttpRequest得到響應(yīng)回傳的全部文本內(nèi)容。只有當(dāng)ReadyState的值為3或4時(shí)此屬性才會(huì)有部分或者全部值，否則此屬性只會(huì)是空字串。

3．responseXML屬性

只有當(dāng) ReadyState屬性為4，并且響應(yīng)頭部的Content-Type的MIME類型被指定為XML（text/xml或者 application/xml）時(shí)，此屬性才會(huì)有值并且被解析為一個(gè)XML文檔，否則此屬性為Null。若是回傳的XML文檔結(jié)構(gòu)不良或未完成響應(yīng)回傳，此屬性也會(huì)為Null，由此可見(jiàn)，此屬性用來(lái)描述被XMLHttpRequest解析后的XML文檔的屬性。

4．status屬性

用于描述服務(wù)器Http請(qǐng)求的狀態(tài)值，通過(guò)此屬性值我們可以判斷服務(wù)器的響應(yīng)狀態(tài)，如我們通常通過(guò)判斷status==200來(lái)判斷服務(wù)器是否正常返回。但是注意，必須是日readyState為3或4時(shí)才能對(duì)此屬性進(jìn)行訪問(wèn)。

5．status屬性

用于描述服務(wù)器Http請(qǐng)求的狀態(tài)文本，通過(guò)此屬性我們可以得到服務(wù)器響應(yīng)的狀態(tài)的描述文本，與status屬性同樣，必須在readyState為3或4時(shí)才能對(duì)此屬性進(jìn)行訪問(wèn)。

6．onreadystatechange事件

每當(dāng)readyState發(fā)生改變時(shí)觸發(fā)此事件，我們一般都通過(guò)此事件來(lái)觸發(fā)回傳處理函數(shù)。

7．open()方法

XMLHttpRequest 對(duì)象是通過(guò)open(method，uri，async，username，password)的方法來(lái)進(jìn)行初始化工作的，通過(guò)調(diào)用此方法將得到一個(gè)可以用來(lái)進(jìn)行發(fā)送（send()方法）的對(duì)象。其中method參數(shù)是用來(lái)指定發(fā)送請(qǐng)求的HttpRequest類型，其值類型為字串，值可以為get、 post、put、delete等；uri參數(shù)是用來(lái)指定請(qǐng)求被發(fā)送到的服務(wù)器地址，該地址會(huì)被自動(dòng)解析為絕對(duì)地址，所以在這里可以用相對(duì)地址來(lái)表示； async是一個(gè)類型為boolean類型的參數(shù)，默認(rèn)情況下為true，此時(shí)表示為異步提交，如果希望發(fā)送一個(gè)同步請(qǐng)求可以將此值設(shè)為false；在服務(wù)器需要驗(yàn)證訪問(wèn)用戶的情況，我們可以設(shè)置username以及password兩個(gè)參數(shù)。

當(dāng)open()方法被調(diào)用時(shí)，XMLHttpRequest對(duì)象將會(huì)把readyState屬性設(shè)為1，且初始化其他屬性，如果此時(shí)一個(gè)請(qǐng)求正在被發(fā)送或者響應(yīng)正在被接收，則前一請(qǐng)求的數(shù)據(jù)和內(nèi)容將會(huì)丟失，請(qǐng)求將會(huì)被取消。

8．send()方法

當(dāng)調(diào)用 open()方法后，我們就可以通過(guò)調(diào)用send()方法按照open()方法設(shè)定的參數(shù)將請(qǐng)求進(jìn)行發(fā)送。當(dāng)open()方法中async參數(shù)為true 時(shí)，在send()方法調(diào)用后立即return，否則將會(huì)中斷直到請(qǐng)求返回。需要注意的是，send()方法必須在readyState為1時(shí)，即調(diào)用 open()方法以后調(diào)用。在調(diào)用send()方法以后到接收到響應(yīng)頭之前，readyState的值將被設(shè)為2，一旦開(kāi)始接收到響應(yīng)消息， readyState將會(huì)被設(shè)為3，直到響應(yīng)接收完成，readyState的值才會(huì)被設(shè)為4。

9．a(chǎn)bort()方法

該方法可以暫停一個(gè)HttpRequest的請(qǐng)求發(fā)送或是HttpResponse的接收，并且將XMLHttpRequest對(duì)象設(shè)置為初始化狀態(tài)。

10．setRequestHeader()方法

該方法用于在調(diào)用open()方法后，設(shè)置HttpRequest頭的信息，setRequestHeader（header,value）方法包含兩個(gè)參數(shù)，前一個(gè)是header鍵名稱，后一個(gè)是其值。

11．getResponseHeader()方法

此方法在readyState為3或4時(shí)，用于獲取HttpResponse的頭部信息，此外我們還可以通過(guò)getAllResponseHeaders()獲取所有的HttpResponse的頭部信息。

在搞清楚了XMLHttpRequest的這些基本屬性方法以后，我們就可以開(kāi)始編寫我們的第一個(gè)Ajax程序了。我們準(zhǔn)備通過(guò)點(diǎn)擊一個(gè)按鈕然后通過(guò)Ajax的方式到服務(wù)端取回一個(gè)Hello world!的字符串顯示在界面的一個(gè)文本框里。

我們?cè)谝粋€(gè)配置好的站點(diǎn)工程里面新建一個(gè)名為AjaxTest.aspx頁(yè)面。首先我們?cè)赾s文件中的page_load事件函數(shù)中寫下如下代碼：

AjaxTest.aspx.cs:

protected void Page_Load(object sender, EventArgs e)

{

if (Request.QueryString["s"] == "1")//使用查詢字串來(lái)指示這個(gè)請(qǐng)求是通過(guò)Ajax發(fā)出的

{

Response.Write("hello world!");//向HttpResponse中輸出hello world!

Response.End();//將頁(yè)面緩沖發(fā)送向客戶端瀏覽器并中止該頁(yè)輸出

//如果去掉這句會(huì)得到多余的HTML代碼

}

相對(duì)來(lái)說(shuō)，我們?cè)谇芭_(tái)頁(yè)面中書(shū)寫的代碼將會(huì)多一些，慢慢地你會(huì)發(fā)現(xiàn)這也許是Ajax的一個(gè)慣例：

AjaxTest.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxTest.aspx.cs" Inherits= "AjaxTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./ TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--

function GetInfo(){//我們就是通過(guò)這個(gè)函數(shù)來(lái)異步獲取信息的

var xmlHttpReq = null;//聲明一個(gè)空對(duì)象用來(lái)裝入XMLHttpRequest

if (window.XMLHttpRequest){//除IE5 IE6 以外的瀏覽器XMLHttpRequest是window的子對(duì)象

xmlHttpReq = new XMLHttpRequest();//我們通常采用這種方式實(shí)例化一個(gè)XMLHttpRequest

}

else if (window.ActiveXObject){//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的

xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

//IE5 IE6是通過(guò)這種方式

}

if(xmlHttpReq != null){//如果對(duì)象實(shí)例化成功我們就可以干活啦

xmlHttpReq.open("get","AjaxTest.aspx?s=1",true);

//調(diào)用open()方法并采用異步方式

xmlHttpReq.onreadystatechange=RequestCallBack; //設(shè)置回調(diào)函數(shù)

xmlHttpReq.send(null);//因?yàn)槭褂胓et方式提交，所以可以使用null參調(diào)用

}

function RequestCallBack(){//一旦readyState值改變，將會(huì)調(diào)用這個(gè)函數(shù)

if(xmlHttpReq.readyState == 4)

{

document.getElementById("iptText").value = xmlHttpReq.responseText;

//將xmlHttpReq.responseText的值賦給iptText控件

如果你在點(diǎn)擊按鈕的瞬間發(fā)現(xiàn)文本框內(nèi)閃電般地出現(xiàn)了 “Hello world!”，那么恭喜你，你已經(jīng)完成了一個(gè)Ajax調(diào)用。如果你還對(duì)前臺(tái)頁(yè)面中那些和C#貌似神離的代碼覺(jué)得不太明白，沒(méi)關(guān)系，接下來(lái)我們就將來(lái)簡(jiǎn)單學(xué)習(xí)一下Ajax另外一個(gè)重要的部分——JavaScript。

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

ajax入門

5.2 Ajax基礎(chǔ)http://book.csdn.net/bookfiles/653/10065320712.shtml

5.2.1 XMLHttpRequest對(duì)象