電腦類ajax和服務(wù)器技術(shù)

Ajax編程技術(shù)

第三章 Ajax和服務(wù)器端技術(shù)3-2

3.1概述

如果只使用XMLHttpRequest更新頁面，而不使用任何來自服務(wù)器輸入的技術(shù)，不能稱之為Ajax。 使用Ajax的最大優(yōu)勢之一就是，可以為Ajax應(yīng)用程序選擇自己偏愛的服務(wù)器端技術(shù)，如ASP.NET,PHP,Java等。 對于每種服務(wù)器端技術(shù)來說，Ajax讀取XMLHttpRequest對象與服務(wù)器通信的方式基本上是相同的，但服務(wù)器接收到信息后的處理方式就個(gè)不相同了。3-3

3.2Ajax和服務(wù)器端技術(shù)表單和HTML控件

Ajax并未改變HTML控件的工作方式和從其獲得數(shù)據(jù)的方式，服務(wù)器也采用以往的方式來接收它們。但是有兩個(gè)問題：調(diào)用服務(wù)器端頁面的方式；HTML表單完全從頁面中刪除或修改后，不能按預(yù)期方式工作。我們分別解釋。3-4

3.2Ajax和服務(wù)器端技術(shù)傳統(tǒng)的表單的提交模型 提交表單的做法通常是建立一個(gè)帶有按鈕的表但，用戶輸入完數(shù)據(jù)后單擊按鈕后，就將此表單提交給服務(wù)器。 傳統(tǒng)的ASP和PHP使用表單的ACTION屬性將用戶從原始頁面重定向到響應(yīng)頁面。該處理是在用戶被重定向新頁面之前在服務(wù)器上完成，新頁面用來顯示相應(yīng)的響應(yīng)數(shù)據(jù)。<form></form>ButtonRequest.php服務(wù)器返回?cái)?shù)據(jù)Response.php服務(wù)器進(jìn)行處理用戶單擊按鈕提交數(shù)據(jù)服務(wù)器返回?cái)?shù)據(jù)瀏覽器顯示的原始頁面提交后瀏覽器重新定向的頁面3-5

3.2Ajax和服務(wù)器端技術(shù)

在Ajax之前，我們使用的都是這種傳統(tǒng)的提交、重定向模式；而Ajax提出了使用腳本提交頁面的思想。Ajax/JavaScript提交模型

Ajax使用的JavaScript提交模型在以前傳統(tǒng)的提交模型基礎(chǔ)上進(jìn)行了變化。在此模型中，表單可以可選地從模型中刪除。 這種新的模型使用JavaScript截取事件調(diào)用，當(dāng)該事件發(fā)生時(shí)（如用戶單擊提交按鈕），提交的數(shù)據(jù)傳遞給對應(yīng)的腳本，然后有腳本發(fā)起對服務(wù)器的調(diào)用。 腳本甚至不必馬上提交數(shù)據(jù)，可以繼續(xù)等待其它條件也滿足后再提交數(shù)據(jù)。 在該模型中，因?yàn)槟_本可以立即響應(yīng)事件且不必等待數(shù)據(jù)的提交，所以從服務(wù)器返回的數(shù)據(jù)也不必馬上顯示給用戶，而腳本也不必像以前一樣被動(dòng)等待服務(wù)器的響應(yīng)。3-6

3.2Ajax和服務(wù)器端技術(shù)<formonEbent…>Default.htm服務(wù)器端進(jìn)行處理Response.php事件發(fā)生腳本到服務(wù)器瀏覽器顯示的頁面部分頁面更新服務(wù)器返回?cái)?shù)據(jù)Jscript.js3-7

3.3服務(wù)器端的情況 javaScript用來啟用客戶機(jī)/服務(wù)器之間的交互。C/S中的服務(wù)器端會接收來自HTTP請求的數(shù)據(jù)，然后處理數(shù)據(jù)，再以服務(wù)器響應(yīng)所采用的格式返回?cái)?shù)據(jù)。向服務(wù)器提交數(shù)據(jù)

Ajax使用XMLHttpRequest對象向服務(wù)器提交數(shù)據(jù)，這一過程分三個(gè)步驟：設(shè)置事件在接收數(shù)據(jù)時(shí)觸發(fā)；隨請求一起調(diào)用open方法；發(fā)送請求。3-8

3.3服務(wù)器端的情況提交使用格式XMLHttpRequest.opwn(method,URLtocall,asynchronousorsynchronous);其中Method：有兩種方式，GET、POST：用GET方式：

XMLHttpRequest.open(“GET”,“Reponse.php&value=1”,“true”); xHRObject.send(null);用POST方式：

varargument=“value=“; argument+=encodeURIComponent(data) XMLHttpRequest.open(“POST”,“Reponse.php”,“true”); xHRObject.send(argument);3-9

3.3服務(wù)器端的情況服務(wù)器接收請求

JavaScript使用XMLHttpRequest對象的POST或GET方法，將數(shù)據(jù)封裝到URL或Request中，向服務(wù)器提交數(shù)據(jù)。在PHP中，可以使用$_GET、$_POST、$_REQUEST收集客戶機(jī)傳上來的數(shù)據(jù)。在ASP、ASP.NET中，可以使用QueryString、Form或Params收集客戶機(jī)傳上來的數(shù)據(jù)。從HTML表單接收數(shù)據(jù)和從源自JavaScript的請求接收數(shù)據(jù)沒有差別。服務(wù)器獲得數(shù)據(jù)后，就可以按照自己的方式進(jìn)行處理，然后將處理結(jié)果返回給客戶端。

3-10

3.4編寫HTTP響應(yīng)

與傳統(tǒng)的服務(wù)器端技術(shù)所使用的事件順序不同，在Ajax中，用戶要顯示的信息無法立即寫到頁面中。取而代之的是，必須將信息封裝在HTTP響應(yīng)中。辦法很簡單：在PHP中，可以使用echo命令：

$data=“Thisisourdata.”; echo$data;在ASP或ASP.NET中，可以Response.Write方法：

stringdata=“Thisisourdata.”; Response.Write(data);3-11

3.4編寫HTTP響應(yīng)

我們可以創(chuàng)建更為復(fù)雜的結(jié)構(gòu)（如XML結(jié)構(gòu)）。前提是，只要能將它們解析為文本即可。在PHP中，以下代碼就是一個(gè)示例：

$doc=newdomDocument(‘1.0’); $root=$doc->createElement(‘root’); $root=$doc->appendChild($root); $child=$doc->createElement(‘child’); $child=$root->appendChild($child); $value=$doc->createTextNode(“Data”); $value=$child->appendChild($value); $strXml=$doc->saveXML(); echo$strXml;

最后生成的XML文檔結(jié)果如下：

<?xmlversion=“1.0”?> <root> <child>Data</child> </root>

相應(yīng)的字符串追加在HTTP響應(yīng)之后，然后回傳給客戶端顯示。3-12

3.4編寫HTTP響應(yīng)XMLHttpRequest對象

XMLHttpRequest對象并不是Ajax技術(shù)用來執(zhí)行客戶機(jī)/服務(wù)器交互的唯一方法。但它是最受歡迎的一種方法。 我們不討論該對象的工作原理，只介紹它的工作步驟：回調(diào)函數(shù)：接收數(shù)據(jù)的第一階段稱為回調(diào)。這只是一個(gè)JavaScript函數(shù)，在數(shù)據(jù)完成從服務(wù)器的下載時(shí)運(yùn)行。命名回調(diào)函數(shù)時(shí)，可以起一個(gè)類似getData()的名稱?；卣{(diào)函數(shù)在大多數(shù)Ajax應(yīng)用程序中的作用都類似。3-13

3.4編寫HTTP響應(yīng)

在回調(diào)函數(shù)中，第一個(gè)要執(zhí)行的任務(wù)是檢查數(shù)據(jù)是否已下載完畢，這可以通過檢查XMLHttpRequest對象的readyState屬性是否等于4（代表已完成下載）來實(shí)現(xiàn)?；卣{(diào)函數(shù)的典型形式如下：

functiongetData() {if(xHRObject.readyState==4) {//dosomeprocessing } }

確定數(shù)據(jù)已下載完畢后，可以用XMLHttpRequest對象以下兩種屬性之一來取回?cái)?shù)據(jù)：responseTextresponseXML3-14

3.4編寫HTTP響應(yīng)responseText屬性

responseText屬性是從HTTP響應(yīng)中重新取回?cái)?shù)據(jù)的最常見、最簡單的方法?？梢詣?chuàng)建一個(gè)新的JavaScript變量來收集該響應(yīng)的內(nèi)容。 例如，在服務(wù)器端的PHP代碼中，我們已經(jīng)準(zhǔn)備了回傳信息：

$data=“Thisisourdata.”;

可以使用responseText屬性來重新取回HTML/XHTML中的數(shù)據(jù)。functionmyReturnMethod(){if(xmlhttp.readyState==4){if(xmlhttp.status==200)alert(xmlhttp.responseText);elseif(xmlhttp.status==404)alert("Requestedfilenotfound");elsealert("Errorhasoccurredwithstatuscode:"+xmlhttp.status);}}3-15

3.4編寫HTTP響應(yīng)

如果要重新取回XML中的數(shù)據(jù)，而仍使用responseText屬性，應(yīng)將XML數(shù)據(jù)作為字符串返回：

$data=“<?xmlversion=\”1.0\”encoding=\”ISO-8859-1\” standalone=\”yes\”?><root><child>Data</child></root>”; echo$data;3-16

3.4編寫HTTP響應(yīng)responseXML屬性 如果想要將XML文檔回傳給客戶端，responseXML屬性是一個(gè)不錯(cuò)的選擇。它將響應(yīng)視作XML文檔對象，然后用DMO迭代不同的元素、屬性和文本節(jié)點(diǎn)。 但是，使用此屬性時(shí)會存在一些問題。假定我們使用以下服務(wù)器端代碼讀取XML文檔：

$data=“<?xmlversion=\”1.0\”encoding=\”ISO-8859-1\” standalone=\”yes\”?><root><child>Data</child></root>”; echo$data;

然后，將用來讀取的JavaScript代碼更改為：

vardocument=xHRObject.responseXML;

它有可能沒法取回完整的XML文檔，有可能是空的，并沒有傳輸?shù)腦ML標(biāo)記。這是因?yàn)榫帉戫憫?yīng)之前，必須要將響應(yīng)的ContentType設(shè)置為text/xml。3-17

3.4編寫HTTP響應(yīng)

遺憾是的IE瀏覽器不允許這樣的設(shè)置。必須在服務(wù)器上進(jìn)行此項(xiàng)設(shè)置，客戶端才能正常使用responseXML屬性。 在Firefox中，可以在JavaScript中使用overrideMimeType方法將類型設(shè)置為text/xml類型：

xHRObject.overrideMimeType(“text/xml”); xHRObject.send(null); vardocument=xHRObject.responseXML;

此屬性在IE瀏覽器中沒有。但問題還不止這些，如果XML文檔中有錯(cuò)誤導(dǎo)致格式有問題，就會從IE中得到一個(gè)空的對象，而且不會馬上看到明顯的錯(cuò)誤消息。3-18

3.4編寫HTTP響應(yīng)調(diào)式responseXML

在調(diào)查為何從responseXML中得到返回內(nèi)容時(shí)，可以使用4種方法。常見的方法是檢查responseXML中是否有返回內(nèi)容。例如：vartext=xHRObject.responseXML;Alert(text);我們會指望得到類似的內(nèi)容：<?xmlversion=“1.0”encoding=“ISO-8859-1”Standalone=“yes”?><root><child>Data</child></root>

如果沒有得到類似內(nèi)容，說明響應(yīng)就沒有服務(wù)器的正確傳輸，此時(shí)需要檢查服務(wù)器端的代碼。3-19

3.4編寫HTTP響應(yīng)在IE中調(diào)式responseXML

如果要了解IE中有關(guān)某一錯(cuò)誤的詳細(xì)信息，可用如下代碼返回一個(gè)錯(cuò)誤消息：varerrorcode=xHRObject.responseXML.parseError.errorCode;

一般情況下，IE返回值是0，但如果已將ContentType設(shè)置成text/xml，并且responseXML.xml為空，則IE返回值為0以外的數(shù)字。 我們還可以用如下代碼得到更為詳細(xì)的錯(cuò)誤信息：

varerrorcode=xHRObject.responseXML.parseError.reason;3-20

3.4編寫HTTP響應(yīng)使用數(shù)據(jù) 從responseXML屬性中成功返回?cái)?shù)據(jù)后，可以把它當(dāng)作DOM對象從中重新取回?cái)?shù)據(jù)。例如，假設(shè)從responseXML屬性中成功返回的數(shù)據(jù)是：<?xmlversion=“1.0”encoding=“ISO-8859-1”standalone=“yes”?><cart><bood><title>BeginningPHPwithAjax</title><quantity>1</quantity></book></cart>3-21

3.4編寫HTTP響應(yīng)

我們可以用如下代碼返回XML文檔中的<book>元素：varXMLDoc=xHRObject.responseXML;varbook=XMLDoc.getElementsByTagName(“book”);

還可以使用以下代碼導(dǎo)航到book中的第一個(gè)元素：vartitle=book[0].firstChild;

注意，從XML文檔中返回文檔內(nèi)容的方式，不同的瀏覽器是不同的。IE使用text屬性獲得：vartitle=book[0].firstChild.text;//返回“BeginningPHPwithAjax”Mozilla使用textContent屬性獲得：vartitle=book[1].firstChild.textContent;//返回“BeginningPHPwithAjax”3-22

3.4編寫HTTP響應(yīng)

上例中，要強(qiáng)調(diào)的是，IE中的book[0]是第一個(gè)節(jié)點(diǎn)信息，而Firefox則是book[1]！

Firefox中的book[0]會包含一個(gè)帶有換行字符的文本節(jié)點(diǎn)，因?yàn)镕irefox不會跳過空白字符，而將它們視為單獨(dú)的節(jié)點(diǎn)，IE不會這樣。3-23

3.5服務(wù)器端技術(shù)

到目前為止，我們討論的只是數(shù)據(jù)發(fā)送和接收的過程，沒有談?wù)摲?wù)器本身。對于Ajax來說，服務(wù)器端技術(shù)是獨(dú)立的一塊，與服務(wù)器端語言相關(guān)，必須單獨(dú)討論。我們在此以PHP技術(shù)為例來討論。使用Ajax與PHP的示例假設(shè)有個(gè)MySql數(shù)據(jù)庫myDataBase,其中一張表users有如下信息：regidnameemail_address1李文leewen@2郭欣guoxin@3賀琪123@4郭靖guojin@3-24

3.5服務(wù)器端技術(shù)編寫一網(wǎng)頁，其中用下拉菜單顯示用戶姓名，選定某一用戶名（圖1），頁面從服務(wù)器處得到該用戶的姓名和email地址，并在本頁面顯示這些信息（圖2）。圖1圖23-25

3.5服務(wù)器端技術(shù)firstPage.htm:<html><head><scriptsrc="responsexml.js"></script></head><body><form>SelectaUser:<selectname="users"onchange="showUser(this.value)"><optionvalue="1">李文</option><optionvalue="2">郭欣</option><optionvalue="3">賀琪</option><optionvalue="4">郭靖</option></select></form><tableborder=0cellpadding=10cellspacing=0style="font-size:10pt;"><tr><tdid="name"></td><tdid="email"></td></tr></table></body></html>3-26

3.5服務(wù)器端技術(shù)responsexml.php<?phpheader('Content-Type:text/xml');header("Cache-Control:no-cache,must-revalidate");header("Expires:Mon,26Jul199705:00:00GMT");$q=$_GET["q"];$cn=@mysql_connect('localhost',‘user',‘password')ordie("不能連接數(shù)據(jù)庫");$strsql="select*fromuserswhereregid='".$q."'orderbyregid";$result=mysql_db_query(‘myDataBase',$strsql,$cn);echo'<?xmlversion="1.0"encoding="gb2312"?><person>';while($row=mysql_fetch_array($result)){echo"<name>".$row['name']."</name>";echo"<email>".$row['email_address']."</email>";}echo"</person>";mysql_close($cn);?>3-27

3.5服務(wù)器端技術(shù)responsexml.jsvarxmlHttpfunctionshowUser(str){xmlHttp=GetXmlHttpObject()if(xmlHttp==null){alert("BrowserdoesnotsupportHTTPRequest")return}varurl="responsexml.php"url=url+"?q="+strurl=url+"&sid="+Math.random()xmlHttp.onreadystatechange=stateChangedxmlHttp.open("GET",url,true)xmlHttp.send(null)}functionsta