《XML案例教程》課件第9章

第9章XML與AJAX技術(shù)9.1AJAX技術(shù)概述9.2XMLHttpRequest對象9.3AJAX開發(fā)框架9.4AJAX技術(shù)應(yīng)用實例9.5綜合實例9.6本章小結(jié)習(xí)題9

9.1AJAX技術(shù)概述

AJAX全稱為“AsynchronousJavaScriptandXML”(異步JavaScript和XML)，是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。AJAX技術(shù)是目前在瀏覽器中通過JavaScript腳本可以使用的所有技術(shù)的集合。AJAX并沒有創(chuàng)造出某種具體的新技術(shù)，它所使用的所有技術(shù)在很多年前就已經(jīng)存在了。AJAX基于以下技術(shù)：JavaScript、XHTML、CSS、DOM、XML、XSL和XMLHttpRequest。具體來說，AJAX使用XHTML和CSS進(jìn)行頁面標(biāo)準(zhǔn)化呈現(xiàn)，使用DOM實現(xiàn)動態(tài)顯示和交互，使用XML和XSL進(jìn)行數(shù)據(jù)交換和處理，使用XMLHttpRequest對象進(jìn)行異步數(shù)據(jù)讀取，使用JavaScript綁定和處理所有數(shù)據(jù)。

傳統(tǒng)Web應(yīng)用采用同步交互過程：用戶首先向Web服務(wù)器發(fā)送一個HTTP請求，服務(wù)器獲取請求后，從后臺數(shù)據(jù)庫查找數(shù)據(jù)，并生成HTML頁面，再向客戶端返回HTML頁面。在服務(wù)器處理瀏覽器的請求時，頁面等待刷新，這是一種不連貫的用戶體驗。傳統(tǒng)Web開發(fā)模型如圖9-1所示。圖9-1傳統(tǒng)Web開發(fā)模型與傳統(tǒng)Web應(yīng)用不同的是，AJAX采用異步交互過程。AJAX技術(shù)在用戶與服務(wù)器之間引入中間媒介——AJAX引擎，從而消除了網(wǎng)絡(luò)交互過程中長時間的處理和等待過程。AJAX引擎允許客戶端和服務(wù)器之間的交互過程異步進(jìn)行，客戶端通過JavaScript腳本向服務(wù)器異步調(diào)用數(shù)據(jù)，Web服務(wù)器以XML文檔形式將數(shù)據(jù)返回給客戶端的AJAX引擎，AJAX引擎將數(shù)據(jù)局部更新到客戶端的HTML頁面中。數(shù)據(jù)的處理和組織在客戶端完成，不需要到服務(wù)器中去重新加載整個HTML頁面，用戶感覺不到頁面的刷新，能夠獲得很好的體驗。基于AJAX的Web開發(fā)模型如圖9-2所示。圖9-2基于AJAX的Web開發(fā)模型使用AJAX技術(shù)帶來如下好處：

(1)可減輕服務(wù)器負(fù)擔(dān)。AJAX的原則是“按需取數(shù)據(jù)”，可最大程度地減少冗余請求和響應(yīng)對服務(wù)器造成的負(fù)擔(dān)。

(2)無刷新更新頁面，可減少用戶心理和實際等待時間。AJAX使用XMLHttpRequest對象發(fā)送請求并得到服務(wù)器響應(yīng)，不重新載入整個頁面，數(shù)據(jù)下載完畢后將局部更新頁面，用戶感覺不到頁面的刷新，從而帶來更好的用戶體驗。

(3)可以把服務(wù)器的一部分工作轉(zhuǎn)移到客戶端，利用客戶端的閑置能力進(jìn)行處理，以減輕服務(wù)器的負(fù)擔(dān)，節(jié)約空間和帶寬。

(4)基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，不需要下載插件或小程序。

(5)可進(jìn)一步促進(jìn)頁面的呈現(xiàn)和數(shù)據(jù)的分離。

9.2

XMLHttpRequest對象

XMLHttpRequest是XMLHTTP組件的對象，通過該對象AJAX可以像桌面應(yīng)用程序一樣同服務(wù)器進(jìn)行數(shù)據(jù)層面的交換，不需要每次都刷新整個頁面，只需進(jìn)行頁面的局部更新。頁面的處理工作由客戶端完成，服務(wù)器負(fù)責(zé)數(shù)據(jù)的傳輸，客戶機(jī)與服務(wù)器進(jìn)行異步數(shù)據(jù)交互，減輕了服務(wù)器的負(fù)擔(dān)，加快了響應(yīng)速度，同時也縮短了用戶等待時間。從IE5.0開始開發(fā)人員可以在Web頁面內(nèi)部使用XMLHTTPActiveX組件擴(kuò)展自身的功能，不用從當(dāng)前的Web頁面導(dǎo)航就可以直接傳輸數(shù)據(jù)到服務(wù)器或者從服務(wù)器接收數(shù)據(jù)。Mozilla1.0和NetScape7創(chuàng)建繼承XML代理類XMLHttpRequest，XMLHttpRequest對象和XMLHTTP組件很相似，它們的方法屬性類似，只是部分屬性不同。

IE瀏覽器和Mozilla瀏覽器創(chuàng)建XMLHttpRequest對象的方法如下：

<scriptlanguage=“JavaScript”>

Varhttp_request=false;

//IE瀏覽器

http_request=newActiveXObject

(“Msxml2.XMLHTTP”);

http_request=newActiveXObject

("Microsoft.XMLHTTP");

//Mozilla瀏覽器

http_request=newXMLHttpRequest();

</script>

XMLHttpRequest對象的方法和屬性如表9-1和表9-2所示。表9-1XMLHttpRequest的方法表9-2XMLHttpRequest的屬性

9.3AJAX開發(fā)框架

AJAX遵循Request/Server模式，發(fā)送XMLHttpRequest請求和異步接收數(shù)據(jù)的程序開發(fā)包含以下基本流程：對象初始化、發(fā)送請求、服務(wù)器接收、服務(wù)器返回結(jié)果、客戶端接收、修改客戶端頁面內(nèi)容。

1．初始化對象并發(fā)送XMLHttpRequest請求

使用XMLHttpRequest對象向服務(wù)器發(fā)送HTTP請求。首先實例化XMLHttpRequest對象，各個瀏覽器實例化過程實現(xiàn)不同，IE以ActiveX控件的形式提供，而Mozilla等瀏覽器則直接以XMLHttpRequest類的形式提供。編寫能夠跨瀏覽器運行的程序代碼如下：if(window.XMLHttpRequest){//Mozilla,Safari,...

http_request=newXMLHttpRequest();

}

elseif(window.ActiveXObject){//IE

http_request=newActiveXObject("Microsoft.XMLHTTP");

}有些版本的Mozilla瀏覽器處理服務(wù)器返回的未包含XMLmime-type頭部信息的內(nèi)容時會出錯。因此，要確保返回的內(nèi)容包含text/xml信息。

http_request=newXMLHttpRequest();

http_request.overrideMimeType('text/xml');

2．指定響應(yīng)處理函數(shù)

接下來要指定當(dāng)服務(wù)器返回信息時客戶端的處理函數(shù)。只要將相應(yīng)的處理函數(shù)名稱賦給XMLHttpRequest對象的onreadystatechange屬性就可以了。例如：

http_request.onreadystatechange=processRequest;

需要指出的是，這個函數(shù)名稱不加括號，不指定參數(shù)。也可以用JavaScript即時定義函數(shù)的方式定義響應(yīng)函數(shù)。例如：

http_request.onreadystatechange=function(){處理語句序列};

3．發(fā)出HTTP請求

指定響應(yīng)處理函數(shù)之后，就可以向服務(wù)器發(fā)出HTTP請求了。這一步調(diào)用XMLHttpRequest對象的open和send方法，代碼如下：

http_request.open(‘method’,‘URL’,asyncFlag);

http_request.send(content);

open的第一個參數(shù)是HTTP請求的方法，為Get、Post或者Head。

open的第二個參數(shù)是目標(biāo)URL。基于安全考慮，這個URL只能是同網(wǎng)域的，否則會提示“沒有權(quán)限”的錯誤。這個URL可以是任何的URL，可以是靜態(tài)頁面，也可以是需要服務(wù)器解釋執(zhí)行的動態(tài)頁面，還可以是XML文檔。目標(biāo)URL處理XMLHttpRequest請求則跟處理普通的HTTP請求一樣。

open的第三個參數(shù)指出請求是否為異步方式。如果為True，則為異步方式，請求發(fā)出立即返回，當(dāng)狀態(tài)改變時會調(diào)用onreadystatechange屬性指定的回調(diào)函數(shù)。如果為False則為同步方式，將會等待請求完成或者超時才返回。默認(rèn)為True。按照順序，open調(diào)用完畢之后要調(diào)用send方法。send的參數(shù)如果是以Post方式發(fā)出的，則可以是任何想傳給服務(wù)器的內(nèi)容。跟form一樣，如果要傳文件或者Post內(nèi)容給服務(wù)器，必須先調(diào)用setRequestHeader方法，修改MIME類別，如下：

http_request.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);

這時資料則以查詢字符串的形式列出，作為send的參數(shù)，例如：

name=value&anothername=othervalue&so=on

4．處理服務(wù)器返回的信息

在第2步已經(jīng)指定了響應(yīng)處理函數(shù)。該函數(shù)檢查XMLHttpRequest對象的readyState值，判斷請求目前的狀態(tài)。參照前文的屬性表可以知道，readyState值為4時，代表服務(wù)器已經(jīng)傳回所有的信息，可以開始處理信息并更新頁面內(nèi)容了。代碼如下：if(http_request.readyState==4){

//信息已經(jīng)返回，可以開始處理

}else{

//信息還沒有返回，等待

}服務(wù)器返回信息后，還需要判斷返回的HTTP狀態(tài)碼，確定返回的頁面沒有錯誤。所有的狀態(tài)碼都可以在W3C的官方網(wǎng)站中查到。其中，200代表頁面正常。

if(http_request.status==200){

//頁面正常，可以開始處理信息

}else{

//頁面有問題

}

XMLHttpRequest對成功返回的信息有以下兩種處理方式：

responseText：將傳回的信息當(dāng)字符串使用；

responseXML：將傳回的信息當(dāng)XML文檔使用，可以用DOM處理。

總結(jié)上面的步驟，可以整理出AJAX的開發(fā)框架。函數(shù)processRequest()根據(jù)具體應(yīng)用編寫，服務(wù)器返回的信息暫用window.alert以字符串的形式顯示出來。

【例9-1】

案例說明：以下程序代碼段為AJAX的開發(fā)框架，函數(shù)send_request(url)向服務(wù)器請求url，該處理函數(shù)可以獨立存儲在外部js文件中(send_request.js)。響應(yīng)函數(shù)processRequest()根據(jù)具體應(yīng)用單獨處理。01<scriptlanguage="javascript">

02varhttp_request=false;

03functionsend_request(url){//初始化、指定處理函數(shù)、發(fā)送請求的函數(shù)

04//開始初始化XMLHttpRequest對象

05if(window.XMLHttpRequest){//Mozilla瀏覽器

06try{07http_request=newXMLHttpRequest();

08if(http_request.overrideMimeType){//設(shè)置Mime類別

09http_request.overrideMimeType("text/xml");

10}

11}catch(e){http_request=false;}

12}

13elseif(window.ActiveXObject){//IE瀏覽器

14try{15http_request=newActiveXObject("Msxml2.XMLHTTP");

16}catch(e){

17try{

18http_request=newActiveXObject("Microsoft.XMLHTTP");

19}catch(e){http_request=false;}

20}

21}

22if(!http_request){//異常，創(chuàng)建對象實例失敗23window.alert("不能創(chuàng)建XMLHttpRequest對象實例.");

24returnfalse;

25}

26http_request.onreadystatechange=processRequest;

27//確定發(fā)送請求的方式和url以及是否異步執(zhí)行下段代碼

28http_request.open("Get",url,true);

29http_request.send(null);30}//send_request函數(shù)處理結(jié)束

31//處理返回信息的函數(shù)

32functionprocessRequest(){

33if(http_request.readyState==4){//判斷對象狀態(tài)

34if(http_request.status==200){//信息已經(jīng)成功返回，開始處理信息

35window.alert(http_request.responseText);

36}else{//頁面不正常37window.alert("您所請求的頁面有異常。");

38}

39}

40}

41</script>

9.4

AJAX技術(shù)應(yīng)用實例

本節(jié)介紹幾種常見的AJAX應(yīng)用模式，它們在使用HTML、XML和JavaScript代碼從服務(wù)器獲取數(shù)據(jù)方面有所不同。9.4.1選項卡式顯示

最常見的AJAX任務(wù)是向服務(wù)器請求更新的HTML，并使用它更新部分頁面?？赡苄枰芷谛缘赝瓿蛇@一任務(wù)，比如更新股市報價；也可能要按需更新，比如對搜索請求進(jìn)行響應(yīng)。例9-2中的程序ch9-1.html代碼從服務(wù)器請求一個頁面然后將內(nèi)容放入頁面主體的<div>標(biāo)記中。代碼創(chuàng)建一個選項卡樣式的顯示。圖9-3展示了一個簡單的選項卡式AJAX界面。單擊選項卡的鏈接時，瀏覽器檢索選項卡的內(nèi)容然后將它顯示在選項卡區(qū)域。圖9-3選項卡式顯示

【例9-2】

案例說明：本案例演示“選項卡顯示”，在圖9-3中設(shè)置兩個選項卡，選項卡的標(biāo)題為兩本圖書的書名，當(dāng)點擊選項卡時，采用異步回調(diào)技術(shù)讀取選項卡對應(yīng)的圖書內(nèi)容并填充到圖9-3所示頁面的矩形框內(nèi)。程序名稱：Book1.xml

01<?xmlversion="1.0"encoding="UTF-8"?>

02<Book>

03<Title>軟件系統(tǒng)開發(fā)技術(shù)(修訂版)</Title>

04<CoverName>cover1.jpg</CoverName>

05<BigCover>cover1-1.jpg</BigCover>06<Abstract><![CDATA[本書介紹大型軟件系統(tǒng)的開發(fā)技術(shù)，主要是目前軟件界最為流行，也較實用的結(jié)構(gòu)化方法，包括支持這一方法的工具和環(huán)境；還簡述了其他一些方法和技術(shù)，如Jackson方法、面向?qū)ο蟮能浖_發(fā)方法、測試和維護(hù)技術(shù)以及數(shù)據(jù)庫設(shè)計等，使材料更系統(tǒng)化，并有所比較。]]></Abstract>

07</Book>案例分析：程序Book1.xml存儲了第一本圖書的主要信息。第03行的<Title>元素封裝了圖書的書名，第04行和第05行的分別封裝了圖書封面的縮略圖和放大圖的文件名稱，第06行使用字符數(shù)據(jù)段封裝了圖書的主要內(nèi)容介紹。存儲第二本圖書內(nèi)容的XML文檔(Book2.xml)結(jié)構(gòu)與Book1.xml一致。程序名稱：ch9-1.html

01<html>

02<scriptlanguage="javascript"src="send_request.js">

03</script>

04<scriptlanguage="javascript">

05//處理返回信息的函數(shù)

06functionprocessRequest()

07{

08if((http_request.readyState==4)&&(http_request.status==200))

09{10//信息已經(jīng)成功返回，開始處理信息

11vardobj=document.getElementById("tabDiv");

12if(dobj!=null)

13{

14varobjXML=http_request.responseXML;

15dobj.innerHTML=objXML.documentElement.lastChild.text;

16}

17}

18}19//加載XML文件

20functionloadUrl(fname){

21varurl=window.location.toString();

22url=url.replace(/ch9-1.html/,fname);

23send_request(url);

24}

25functiontab1(){loadUrl('Book1.xml');}

26functiontab2(){loadUrl('Book2.xml');}

27tab1(); //默認(rèn)加載項

28</script>

29<body>30<ahref="javascript:voidtab1();">軟件系統(tǒng)開發(fā)技術(shù)(修訂版)<a>

31<ahref="javascript:voidtab2();">軟件工程(第二版)<a>

32<divid="tabDiv"style="border:1pxsolidblack;padding:10px;">

33</div>

34</body>

35</html>案例分析：程序ch9-1.html的第02行和第03行引入外部js文件“send_request.js”，該外部js文件包含函數(shù)send_request，函數(shù)send_request的主要作用是向服務(wù)器發(fā)送異步HTTP請求，工作流程在9.3節(jié)中已經(jīng)作了詳細(xì)分析，這里不再重復(fù)。

第30行和第31行產(chǎn)生兩個以書名為標(biāo)題的超鏈接，即兩個選項卡，當(dāng)單擊選項卡時(如單擊第30行超鏈接)，將激發(fā)異步請求事件(如第25行從服務(wù)器請求“Book1.xml”文檔)。第21行至第22行處理客戶端的請求鏈接URL，并在第23行調(diào)用send_request函數(shù)向服務(wù)器請求包含圖書具體內(nèi)容的URL(如包含Book1.xml)。第06行的函數(shù)processRequest用于處理服務(wù)器的信息反饋。當(dāng)服務(wù)器的數(shù)據(jù)下載到客戶端后，觸發(fā)processRequest事件，并執(zhí)行第07行至第18行的事件代碼。第11行代碼獲取層對象tabDiv，第14和第15行從服務(wù)器返回的XML中提取圖書的主要內(nèi)容簡介填寫到層tabDiv中，即圖9-3中的矩形框內(nèi)，從而完成頁面的局部更新。

當(dāng)點擊不同的選項卡時，將異步獲取不同的內(nèi)容填充到圖9-3中的矩形框內(nèi)。頁面局部更新，不需要整體刷新。9.4.2讀取更多內(nèi)容

圖9-4和圖9-5展示了一個使用具體內(nèi)容文本替換鏈接文本的例子。在圖9-4中單擊圖書標(biāo)題后的“更多…”超鏈接，超鏈接處的文本將被圖9-5中的圖書具體內(nèi)容代替。圖9-4替換超鏈接前的頁面圖9-5點擊圖9-4中“更多…”超鏈接后的頁面

【例9-3】

案例說明：本案例演示使用AJAX技術(shù)獲取更多的文本數(shù)據(jù)替換被單擊的鏈接。

程序名稱：ch9-2.html

01<html>

02<head>

03<title>代替超鏈接</title>

04<scriptlanguage=“javascript”src=“send_request.js”>

05</script>

06<scriptlanguage="javascript">07//處理返回信息的函數(shù)

08functionprocessRequest()

09{

10if((http_request.readyState==4)&&(http_request.status==200))

11{

12//信息已經(jīng)成功返回，開始處理信息

13vardobj=document.getElementById("moreSpan");

14if(dobj!=null)

15{16varobjXML=http_request.responseXML;

17dobj.innerHTML=objXML.documentElement.lastChild.text;

18}

19}

20}

21//加載XML文件

22functiongetMore(fname)23{

24varurl=window.location.toString();

25url=url.replace(/ch9-2.html/,fname);

26send_request(url);

27}

28</script>

29</head>

30<body>

31<h1>軟件系統(tǒng)開發(fā)技術(shù)</h1>

32軟件系統(tǒng)開發(fā)技術(shù)(修訂版):33<spanid="moreSpan">

34<ahref="javascript:voidgetMore('Book1.xml')">更多...</a>

35</span>

36</body>

37</html>案例分析：程序9-2.html中第33行至第35行定義<span>標(biāo)記，標(biāo)記中放一超鏈接，使用函數(shù)getMore請求“Book1.xml”文檔。第22行至第27行的getMore函數(shù)設(shè)置包含Book1.xml文件名稱的URL，并調(diào)用send_request函數(shù)向服務(wù)器異步請求Book1.xml文檔。

第08行至第20行的響應(yīng)事件processRequest將服務(wù)器返回的XML中的圖書簡介內(nèi)容填充到名稱為moreSpan的<span>標(biāo)記中。這樣做的好處是可以在無需刷新頁面的情況下獲得更多內(nèi)容。9.4.3異步讀取XML數(shù)據(jù)

圖9-6展示了異步讀取圖書信息的例子。單擊左邊的圖書標(biāo)題，包含圖書具體內(nèi)容的XML文檔將顯示在右邊的矩形區(qū)域中。異步讀取圖書的處理信息顯示在下面的矩形框中。圖9-6異步讀取XML數(shù)據(jù)

【例9-4】

案例說明：程序ch9-3.html異步讀取存儲圖書內(nèi)容簡介的XML文檔內(nèi)容，并顯示在HTML頁面中，同時給出異步調(diào)用各個階段的處理狀態(tài)。下面給出部分核心代碼。程序名稱：ch9-3.html

01<scriptlanguage="javascript">

02//處理返回信息的函數(shù)

03functionprocessRequest()

04{

05//信息已經(jīng)成功返回，開始處理信息

06varobjStatus=document.getElementById("handle_status");07objStatus.innerHTML+=(newDate()).toLocaleString();

08switch(http_request.readyState)

09{

10case1:

11objStatus.innerHTML+="正在加載數(shù)據(jù)...<br>";

12break;

13case2:

14objStatus.innerHTML+="數(shù)據(jù)加載完畢...<br>";

15break;16case3:

17objStatus.innerHTML+="正處于交互過程中...<br>";

18break;

19case4:

20objStatus.innerHTML+="就緒，應(yīng)答返回狀態(tài)為："+http_request.status.toString()+"("+http_request.statusText+")<br>";21varobjXML=http_request.responseXML;

22vardobj=document.getElementById("conntent");

23dobj.innerText=objXML.xml;

24break;

25}

26}

27//加載XML文件

28functiongetMore(fname)

29{30varurl=window.location.toString();

31url=url.replace(/ch9-3.html/,fname);

32send_request(url);

33}

34</script>案例分析：第28至第33行的getMore函數(shù)構(gòu)造請求具體圖書信息的URL，調(diào)用send_request函數(shù)向服務(wù)器發(fā)送HTTP請求。參數(shù)fname為調(diào)用函數(shù)傳遞過來的XML文件名稱。

響應(yīng)回調(diào)事件processRequest中的第08行至第25行多分支選擇條件語句switch，根據(jù)返回的當(dāng)前請求狀態(tài)碼，將處理的詳細(xì)過程信息顯示在圖9-6中下面的矩形框中。下面的矩形框使用層對象“objStatus”勾畫。當(dāng)處理到狀態(tài)4時(第19行)，XML數(shù)據(jù)下載完畢，并顯示在右邊的矩形框中(第21行至第23行)。右邊的矩形框用層對象“conntent”勾畫。9.4.4更換多個HTML片段

Web應(yīng)用程序中的一個常見問題是在響應(yīng)用戶輸入時，必須更新顯示頁面中的一些區(qū)域。舉例來說，在一個股票報價應(yīng)用程序中，顯示頁面的一部分可能會展示最近的報價，而另一部分則顯示最近報價的列表。

為更新顯示頁面中的多個區(qū)域，可以使用服務(wù)器的XML響應(yīng)，它包含每個部分的數(shù)據(jù)，數(shù)據(jù)可以使用包含HTML標(biāo)記的字符數(shù)據(jù)段。當(dāng)XML數(shù)據(jù)下載到客戶端后，將讀取不同XML字段，并填充到頁面的不同區(qū)域。

【例9-5】

案例說明：本例中的XML文檔(BookData.xml)元素使用字符數(shù)據(jù)段存儲HTML文檔的片段。程序名稱：BookData.xml

01<?xmlversion="1.0"encoding="UTF-8"?>

02<Book>

03<Title><![CDATA[<fontsize='4'color='red'>軟件系統(tǒng)開發(fā)技術(shù)(修訂版)

</font>]]></Title>

04<Author><![CDATA[<u><i>潘錦平，施小英，姚天昉</i></u>]]></Author>

05<Publisher><![CDATA[<b>西安電子科技大學(xué)出版社</b>]]></Publisher>06<PubDate><![CDATA[2001年1月]]></PubDate>

07<ISBN><![CDATA[7-5606-0492-7]]></ISBN>

08<Abstract><![CDATA[本書介紹大型軟件系統(tǒng)的開發(fā)技術(shù)，主要是目前軟件界最為流行，也較實用的結(jié)構(gòu)化方法，包括支持這一方法的工具和環(huán)境；還簡述了其他一些方法和技術(shù)，<u><fontcolor='blue'>如Jackson方法</font></u>、面向?qū)ο蟮能浖_發(fā)方法、測試和維護(hù)技術(shù)以及數(shù)據(jù)庫設(shè)計等，使材料更系統(tǒng)化，并有所比較。]]></Abstract>

09</Book>案例分析：程序BookData.xml存儲了一本圖書的信息，元素字段中的數(shù)據(jù)包含HTML格式化顯示標(biāo)記。第03行“<fontsize=‘4’color=‘red’>軟件系統(tǒng)開發(fā)技術(shù)(修訂版)</font>”使用4號紅色字體顯示圖書的標(biāo)題。第04行“<u><i>潘錦平，施小英，姚天昉</i></u>”使用斜體加下劃線顯示作者名稱。第05行“<b>西安電子科技大學(xué)出版社</b>”使用粗體顯示出版社名稱。第08行“<u><fontcolor=‘blue’>如Jackson方法</font></u>”使用藍(lán)色字體加下劃線顯示文字“如Jackson方法”。

案例說明：程序ch9-4.html中的異步回調(diào)函數(shù)processRequest()將從服務(wù)器端獲取的多段HTML片段分別加載到客戶端頁面的六個層對象中。下面給出核心代碼。程序名稱：ch9-4.html

01<scriptlanguage="javascript">

02//處理返回信息的函數(shù)

03functionprocessRequest()

04{

05if((http_request.readyState==4)&&(http_request.status==200))

0{07varobjXML=http_request.responseXML;

08document.getElementById('divOne').innerHTML=

objXML.selectSingleNode("/Book/Title").text;

09document.getElementById('divTwo').innerHTML=

objXML.selectSingleNode("/Book/Author").text;

10document.getElementById('divThree').innerHTML=

objXML.selectSingleNode("/Book/Publisher").text;

11document.getElementById('divFour').innerHTML=

objXML.selectSingleNode("/Book/PubDate").text;12document.getElementById('divFive').innerHTML=

objXML.selectSingleNode("/Book/ISBN").text;

13document.getElementById('divSix').innerHTML=

objXML.selectSingleNode("/Book/Abstract").text;

14}

15if(objXML!==null)

16{

17objXML=null;

18}

19}20//加載XML文件

21functiongetXML()

22{

23varurl=window.location.toString();

24url=url.replace(/ch9-4.html/,"BookData.xml");

25url=url+"?t="+((newDate()).valueOf());

26send_request(url);

27}

28</script>案例分析：程序ch9-4.html中第08行至第13行獲取服務(wù)器返回的XML文檔字段中的內(nèi)容并填充到頁面不同的層對象中。程序執(zhí)行的結(jié)果如圖9-7所示，XML文檔字段中的HTML的格式化顯示標(biāo)記獲得正確執(zhí)行。圖9-7加載多段HTML文檔9.4.5數(shù)據(jù)校驗

在輸入form表單內(nèi)容時，通常需要確保數(shù)據(jù)的唯一性，因此，常常在頁面上提供“唯一性校驗”按鈕，讓用戶點擊，打開一個校驗小窗口；或者等form提交到服務(wù)器端，由服務(wù)器判斷后再返回相應(yīng)的校驗信息。前者，window.open操作本來就是比較耗費資源的，通常由window.showModalDialog代替，即使這樣也要彈出一個對話框；后者，需要把整個頁面提交到服務(wù)器并由服務(wù)器判斷校驗，這個過程不僅時間長而且加重了服務(wù)器負(fù)擔(dān)。而使用AJAX，這個校驗請求可以由XMLHttpRequest對象發(fā)出，整個過程不需要彈出新窗口，也不需要將整個頁面提交到服務(wù)器，快速又不加重服務(wù)器負(fù)擔(dān)。

【例9-6】

案例說明：本案例演示用戶名唯一性校驗。當(dāng)用戶在圖9-8的文本框中填寫用戶名并單擊“唯一性檢查”按鈕時，程序ch9-5.html將提取文本框的內(nèi)容向服務(wù)器發(fā)HTTP請求，服務(wù)器程序ch9-5.asp獲取用戶名進(jìn)行用戶名唯一性校驗，并異步傳回校驗結(jié)果。

以下為程序ch9-5.html中的部分代碼。

1．定義表單

以下程序段在<body></body>之間增加一段form表單代碼。第04行的文本框用于接收用戶名輸入。第05行的Button按鈕用于啟用事件userCheck()向服務(wù)器發(fā)用戶名唯一性檢驗的HTTP請求。第08行的層checkResult用于顯示檢驗的結(jié)果提示。01<formname="form1"method="post"action="">

02<tablealign="center">

03<tr>

04<td>用戶名：<inputtype="text"id="username"name="username"></td>

05<td><inputtype="button"value="唯一性檢查"onclick="usercheck()"></td>06</tr>

07<tr>

08<tdcolspan="2"><divid="checkresult"></div></td>

09</tr>

10</table>

11</form>

2．發(fā)唯一性檢驗的HTTP請求

第05行至第09行先做客戶端的檢驗，當(dāng)文本框為空時，提示用戶名不能為空。當(dāng)用戶名不為空時，執(zhí)行第12行至第15行的請求代碼。第12行構(gòu)造向服務(wù)器請求程序ch9-5.asp的url，第14行將文本框中獲取的用戶名附加到url后，第15行調(diào)用send_request函數(shù)發(fā)Get請求。01functionuserCheck()

02{

03varobjDiv=document.getElementById("checkResult");

04varobjText=document.getElementById("username");

05if(objText.value=="")

06{

07objDiv.style.color="red";

08objDiv.innerHTML="用戶名不能為空！";

09}10else

11{

12varurl=window.location.toString();

13url=url.replace(/ch9-5.html/,"ch9-5.asp");

14url=url+"?username="+objText.value;

15send_request(url);

16}

17}

3．響應(yīng)服務(wù)器端的回復(fù)

第06行獲取服務(wù)器端的檢驗結(jié)果，如果檢驗結(jié)果為“True”則驗證通過，否則驗證失敗。01functionprocessRequest()

02{

03if((http_request.readyState==4)&&(http_request.status==200))

04{

05varobjDiv=document.getElementById("checkResult");

06varobjText=http_request.responseText;07if(objText=="True")

08{

09objDiv.style.color="green";

10objDiv.innerHTML="驗證通過！";

11}

12elseif(objText=="False")

13{

14objDiv.style.color="red";

15objDiv.innerHTML="用戶名不存在！";

16}17else

18{

19objDiv.innerHTML="";

20}

21}

22}

4．服務(wù)器端的驗證處理

程序ch9-5.asp為服務(wù)器端的程序。第03行接收客戶端發(fā)送的用戶名，第04行將文本字符串轉(zhuǎn)換為對象。函數(shù)isUsernameExist中第09行至第21行對用戶名進(jìn)行檢驗，第14行至第16行預(yù)置了三個用戶名稱“user1”、“user2”、“user3”，當(dāng)客戶端輸入的用戶名與這三個用戶名之一匹配時，檢驗通過，否則不能通過。第07行調(diào)用isUsernameExist檢驗函數(shù)將檢驗結(jié)果輸出到客戶端，輸出值為邏輯值。實際使用時，檢驗函數(shù)isUsernameExist可以完成與數(shù)據(jù)庫的交互，從數(shù)據(jù)中獲取用戶名進(jìn)行校驗，更具有實際意義。程序名稱：ch9-5.asp

01<%@language="JScript"%>

02<%

03varusername=Request.QueryString("username");

04varusername=newString(username);

05if(username)

06{

07Response.write(isUsernameExist(username));

08}

09functionisUsernameExist(username)10{

11varret=false;

12switch(username.toLowerCase())

13{

14case"user1":

15case"user2":

16case"user3":17ret=true;

18break;

19}

20returnret;

21}

22%>

圖9-8為例9-6中的程序用戶名驗證通過后的結(jié)果顯示。圖9-8用戶名唯一性校驗

9.5綜合實例

本節(jié)為圖書管理系統(tǒng)編寫一個檢索讀者基本信息的查詢子系統(tǒng)，界面如圖9-9所示。當(dāng)讀者正確輸入借書證號、用戶密碼，單擊“查詢信息”按鈕，在矩形框中輸出讀者的詳細(xì)信息。如果讀者不輸入借書證號和密碼，系統(tǒng)將提示借書證號和用戶密碼不能為空。如果讀者輸入錯誤的借書證號和密碼，則系統(tǒng)在矩形框中給出找不到用戶的信息提示。圖9-9查詢用戶基本信息

1．設(shè)計數(shù)據(jù)庫表

創(chuàng)建數(shù)據(jù)庫BookLibary，添加用戶表users，用戶表的基本結(jié)構(gòu)和數(shù)據(jù)類型如表9-3所示。其中用戶性別gender的值“1”表示“男”，“0”表示“女”。用戶類別“usertype”的值“1”表示“教師”，“2”表示“學(xué)生”，“3”表示“其他人員”。表9-3用戶基本信息表

2．設(shè)計頁面表單

程序show_users.html的部分代碼如下：

第01行為客戶端的數(shù)據(jù)島，加載轉(zhuǎn)換程序，將服務(wù)器返回的XML文檔轉(zhuǎn)換為HTML標(biāo)記并顯示在第10行的層中。

第05行和第06行分別設(shè)置文本輸入框和密碼輸入框，接收借書證號和密碼的輸入。第07行的按鈕事件userCheck()對文本框和密碼框輸入的內(nèi)容進(jìn)行客戶端校驗，校驗成功則向服務(wù)器請求用戶信息。第10行的層顯示出錯信息或用戶信息。01<xmlid="xsldata"src="transform.xsl"></xml>

02<formname="form1"method="post"action="">

03<tablealign="center"width="600">

04<tr>

05<td>借書證號：<inputtype="text"id="userid"name="username"></td>

06<td>用戶密碼：<inputtype="password"id="userpassword"name="userpassword"></td>07<td><inputtype="button"value="查詢信息"onclick="usercheck()"></td>

08</tr>

09<tr>

10<tdcolspan="3">

<divid="checkresult"

style="border-style:solid;border-color:red;border-width:1px;"></div></td>

11</tr>

12</table>

13</form>

3．設(shè)計XSL轉(zhuǎn)換程序

程序Transform.xsl在頁面啟動時首先被加載到客戶端的數(shù)據(jù)島中，當(dāng)服務(wù)器端的用戶信息下載到客戶端后，啟用轉(zhuǎn)換程序?qū)ML文檔轉(zhuǎn)換為HTML文檔并顯示。第12行和第13行對返回值的性別做處理，轉(zhuǎn)換為中文的“男”和“女”。同樣第19行至第23行將返回值的人員類別碼轉(zhuǎn)換為對應(yīng)的中文漢字。01<?xmlversion="1.0"encoding="UTF-8"?>

02<xsl:stylesheetversion="1.0"xmlns:xsl="/1999/XSL/Transform">

03<xsl:templatematch="/">

04<tablewidth="400"cellpadding="5"cellspacing="5">

05<xsl:for-eachselect="/root/row">

06<tr><tdwidth="30%">借書證號:</td>

07<td><xsl:value-ofselect="userId"/></td></tr>

08<tr><td>讀者姓名:</td> 09<td><xsl:value-ofselect="username"/></td></tr>

10<tr><td>讀者性別:</td>

11<td><xsl:choose>

12<xsl:whentest="gender='true'">男</xsl:when>

13<xsl:otherwise>女</xsl:otherwise>

14</xsl:choose>

15</td></tr>

16<tr><td>工作部門:</td>17<td><xsl:value-ofselect="department"/></td></tr>

18<tr><td>讀者類型:</td>

19<td><xsl:choose>

20<xsl:whentest="usertype='1'">教師</xsl:when>

21<xsl:whentest="usertype='2'">學(xué)生</xsl:when>

22<xsl:otherwise>其他人員</xsl:otherwise>

23</xsl:choose></td></tr>

24<tr><td>電子郵箱:</td>

25<td><xsl:value-ofselect="email"/></td></tr>26<tr><td>聯(lián)系電話:</td>

27<td><xsl:value-ofselect="telephone"/></td></tr>

28</xsl:for-each>

29</table>

30</xsl:template>

31</xsl:stylesheet>

4．客戶端的非空校驗

程序show_users.html的部分代碼如下：

第04行和第05行分別獲取userId和userpassword對象，第06行和第11行分別對借書證號和用戶密碼作非空校驗，如果為空則在id為“checkResult”的層中顯示出錯信息。校驗通過則執(zhí)行第18行至第21行。第19行構(gòu)造url向后臺的handle_login.asp程序請求讀者信息。第20行構(gòu)造請求字符串。第21行調(diào)用send_request函數(shù)發(fā)異步請求。01functionuserCheck()

02{

03varobjDiv=document.getElementById("checkResult");

04varobjUserId=document.getElementById("userId");

05varobjPassword=document.getElementById("userpassword");

06if(objUserId.value=="")07{

08objDiv.style.color="red";

09objDiv.innerHTML="借書證號不能為空！";

10}

11elseif(objPassword.value=="")

12{

13objDiv.style.color="red";

14objDiv.innerHTML="用戶密碼不能為空！";

15}16else

17{

18varurl=window.location.toString();

19url=url.replace(/show_users.html/,"handle_login.asp");

20varstr="userId="+objUserId.value+"&userpassword="+objPassword.value;

21send_request(url,str);

22}

23}考慮到數(shù)據(jù)傳輸?shù)陌踩?，函?shù)send_request的部分代碼需作修改，第03行的HTTP請求為Post請求，第04行setRequestHeader方法設(shè)置請求字符串的編碼方式，第05行發(fā)送帶有借書證號和密碼字符串的異步請求。01http_request.onreadystatechange=processRequest;

02//確定發(fā)送請求的方式和url以及是否同步執(zhí)行下段代碼

03http_request.open("Post",url,true);

04http_request.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");

05http_request.send(str);

5．對服務(wù)器端返回值的處理

程序show_users.html的部分代碼如下：

第07行至第11行對服務(wù)器返回的字符進(jìn)行解碼，并建立XMLDOM對象，將返回的XML字符串加載到對象中。第12行判斷返回的XMLDOM對象中是否含有讀者信息，如果沒有則提示用戶名和密碼不正確，否則使用存儲在客戶端數(shù)據(jù)島的XSL轉(zhuǎn)換文件對XML進(jìn)行轉(zhuǎn)換，并將轉(zhuǎn)換的結(jié)果寫入objDiv.的innerHTML屬性中。01functionprocessRequest()

02{

03if((http_request.readyState==4)&&(http_request.status==200))

04{//查找層對象checkResult用于接收返回結(jié)果

05varobjDiv=document.getElementById("checkResult");

06//將服務(wù)器返回結(jié)果存儲于文本變量xmlText中07varxmlText=unescape(http_request.responseText);

08//建立XMLDOM對象，接收服務(wù)器端返回的XML文檔

09varXMLDom=newActiveXObject("Microsoft.XMLDOM");

10XMLDom.async=false;//設(shè)置為同步方式獲取數(shù)據(jù)

11XMLDom.loadXML