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

第9章XML与AJAX技术9.1AJAX技术概述9.2XMLHttpRequest对象9.3AJAX开发框架9.4AJAX技术应用实例9.5综合实例9.6本章小结习题9

9.1AJAX技术概述

AJAX全称为“AsynchronousJavaScriptandXML”(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。AJAX技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合。AJAX并没有创造出某种具体的新技术，它所使用的所有技术在很多年前就已经存在了。AJAX基于以下技术：JavaScript、XHTML、CSS、DOM、XML、XSL和XMLHttpRequest。具体来说，AJAX使用XHTML和CSS进行页面标准化呈现，使用DOM实现动态显示和交互，使用XML和XSL进行数据交换和处理，使用XMLHttpRequest对象进行异步数据读取，使用JavaScript绑定和处理所有数据。

传统Web应用采用同步交互过程：用户首先向Web服务器发送一个HTTP请求，服务器获取请求后，从后台数据库查找数据，并生成HTML页面，再向客户端返回HTML页面。在服务器处理浏览器的请求时，页面等待刷新，这是一种不连贯的用户体验。传统Web开发模型如图9-1所示。图9-1传统Web开发模型与传统Web应用不同的是，AJAX采用异步交互过程。AJAX技术在用户与服务器之间引入中间媒介——AJAX引擎，从而消除了网络交互过程中长时间的处理和等待过程。AJAX引擎允许客户端和服务器之间的交互过程异步进行，客户端通过JavaScript脚本向服务器异步调用数据，Web服务器以XML文档形式将数据返回给客户端的AJAX引擎，AJAX引擎将数据局部更新到客户端的HTML页面中。数据的处理和组织在客户端完成，不需要到服务器中去重新加载整个HTML页面，用户感觉不到页面的刷新，能够获得很好的体验。基于AJAX的Web开发模型如图9-2所示。图9-2基于AJAX的Web开发模型使用AJAX技术带来如下好处：

(1)可减轻服务器负担。AJAX的原则是“按需取数据”，可最大程度地减少冗余请求和响应对服务器造成的负担。

(2)无刷新更新页面，可减少用户心理和实际等待时间。AJAX使用XMLHttpRequest对象发送请求并得到服务器响应，不重新载入整个页面，数据下载完毕后将局部更新页面，用户感觉不到页面的刷新，从而带来更好的用户体验。

(3)可以把服务器的一部分工作转移到客户端，利用客户端的闲置能力进行处理，以减轻服务器的负担，节约空间和带宽。

(4)基于标准化的并被广泛支持的技术，不需要下载插件或小程序。

(5)可进一步促进页面的呈现和数据的分离。

9.2

XMLHttpRequest对象

XMLHttpRequest是XMLHTTP组件的对象，通过该对象AJAX可以像桌面应用程序一样同服务器进行数据层面的交换，不需要每次都刷新整个页面，只需进行页面的局部更新。页面的处理工作由客户端完成，服务器负责数据的传输，客户机与服务器进行异步数据交互，减轻了服务器的负担，加快了响应速度，同时也缩短了用户等待时间。从IE5.0开始开发人员可以在Web页面内部使用XMLHTTPActiveX组件扩展自身的功能，不用从当前的Web页面导航就可以直接传输数据到服务器或者从服务器接收数据。Mozilla1.0和NetScape7创建继承XML代理类XMLHttpRequest，XMLHttpRequest对象和XMLHTTP组件很相似，它们的方法属性类似，只是部分属性不同。

IE浏览器和Mozilla浏览器创建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开发框架

AJAX遵循Request/Server模式，发送XMLHttpRequest请求和异步接收数据的程序开发包含以下基本流程：对象初始化、发送请求、服务器接收、服务器返回结果、客户端接收、修改客户端页面内容。

1．初始化对象并发送XMLHttpRequest请求

使用XMLHttpRequest对象向服务器发送HTTP请求。首先实例化XMLHttpRequest对象，各个浏览器实例化过程实现不同，IE以ActiveX控件的形式提供，而Mozilla等浏览器则直接以XMLHttpRequest类的形式提供。编写能够跨浏览器运行的程序代码如下：if(window.XMLHttpRequest){//Mozilla,Safari,...

http_request=newXMLHttpRequest();

}

elseif(window.ActiveXObject){//IE

http_request=newActiveXObject("Microsoft.XMLHTTP");

}有些版本的Mozilla浏览器处理服务器返回的未包含XMLmime-type头部信息的内容时会出错。因此，要确保返回的内容包含text/xml信息。

http_request=newXMLHttpRequest();

http_request.overrideMimeType('text/xml');

2．指定响应处理函数

接下来要指定当服务器返回信息时客户端的处理函数。只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性就可以了。例如：

http_request.onreadystatechange=processRequest;

需要指出的是，这个函数名称不加括号，不指定参数。也可以用JavaScript即时定义函数的方式定义响应函数。例如：

http_request.onreadystatechange=function(){处理语句序列};

3．发出HTTP请求

指定响应处理函数之后，就可以向服务器发出HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法，代码如下：

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

http_request.send(content);

open的第一个参数是HTTP请求的方法，为Get、Post或者Head。

open的第二个参数是目标URL。基于安全考虑，这个URL只能是同网域的，否则会提示“没有权限”的错误。这个URL可以是任何的URL，可以是静态页面，也可以是需要服务器解释执行的动态页面，还可以是XML文档。目标URL处理XMLHttpRequest请求则跟处理普通的HTTP请求一样。

open的第三个参数指出请求是否为异步方式。如果为True，则为异步方式，请求发出立即返回，当状态改变时会调用onreadystatechange属性指定的回调函数。如果为False则为同步方式，将会等待请求完成或者超时才返回。默认为True。按照顺序，open调用完毕之后要调用send方法。send的参数如果是以Post方式发出的，则可以是任何想传给服务器的内容。跟form一样，如果要传文件或者Post内容给服务器，必须先调用setRequestHeader方法，修改MIME类别，如下：

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

这时资料则以查询字符串的形式列出，作为send的参数，例如：

name=value&anothername=othervalue&so=on

4．处理服务器返回的信息

在第2步已经指定了响应处理函数。该函数检查XMLHttpRequest对象的readyState值，判断请求目前的状态。参照前文的属性表可以知道，readyState值为4时，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。代码如下：if(http_request.readyState==4){

//信息已经返回，可以开始处理

}else{

//信息还没有返回，等待

}服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站中查到。其中，200代表页面正常。

if(http_request.status==200){

//页面正常，可以开始处理信息

}else{

//页面有问题

}

XMLHttpRequest对成功返回的信息有以下两种处理方式：

responseText：将传回的信息当字符串使用；

responseXML：将传回的信息当XML文档使用，可以用DOM处理。

总结上面的步骤，可以整理出AJAX的开发框架。函数processRequest()根据具体应用编写，服务器返回的信息暂用window.alert以字符串的形式显示出来。

【例9-1】

案例说明：以下程序代码段为AJAX的开发框架，函数send_request(url)向服务器请求url，该处理函数可以独立存储在外部js文件中(send_request.js)。响应函数processRequest()根据具体应用单独处理。01<scriptlanguage="javascript">

02varhttp_request=false;

03functionsend_request(url){//初始化、指定处理函数、发送请求的函数

04//开始初始化XMLHttpRequest对象

05if(window.XMLHttpRequest){//Mozilla浏览器

06try{07http_request=newXMLHttpRequest();

08if(http_request.overrideMimeType){//设置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){//异常，创建对象实例失败23window.alert("不能创建XMLHttpRequest对象实例.");

24returnfalse;

25}

26http_request.onreadystatechange=processRequest;

27//确定发送请求的方式和url以及是否异步执行下段代码

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

29http_request.send(null);30}//send_request函数处理结束

31//处理返回信息的函数

32functionprocessRequest(){

33if(http_request.readyState==4){//判断对象状态

34if(http_request.status==200){//信息已经成功返回，开始处理信息

35window.alert(http_request.responseText);

36}else{//页面不正常37window.alert("您所请求的页面有异常。");

38}

39}

40}

41</script>

9.4

AJAX技术应用实例

本节介绍几种常见的AJAX应用模式，它们在使用HTML、XML和JavaScript代码从服务器获取数据方面有所不同。9.4.1选项卡式显示

最常见的AJAX任务是向服务器请求更新的HTML，并使用它更新部分页面。可能需要周期性地完成这一任务，比如更新股市报价；也可能要按需更新，比如对搜索请求进行响应。例9-2中的程序ch9-1.html代码从服务器请求一个页面然后将内容放入页面主体的<div>标记中。代码创建一个选项卡样式的显示。图9-3展示了一个简单的选项卡式AJAX界面。单击选项卡的链接时，浏览器检索选项卡的内容然后将它显示在选项卡区域。图9-3选项卡式显示

【例9-2】

案例说明：本案例演示“选项卡显示”，在图9-3中设置两个选项卡，选项卡的标题为两本图书的书名，当点击选项卡时，采用异步回调技术读取选项卡对应的图书内容并填充到图9-3所示页面的矩形框内。程序名称：Book1.xml

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

02<Book>

03<Title>软件系统开发技术(修订版)</Title>

04<CoverName>cover1.jpg</CoverName>

05<BigCover>cover1-1.jpg</BigCover>06<Abstract><![CDATA[本书介绍大型软件系统的开发技术，主要是目前软件界最为流行，也较实用的结构化方法，包括支持这一方法的工具和环境；还简述了其他一些方法和技术，如Jackson方法、面向对象的软件开发方法、测试和维护技术以及数据库设计等，使材料更系统化，并有所比较。]]></Abstract>

07</Book>案例分析：程序Book1.xml存储了第一本图书的主要信息。第03行的<Title>元素封装了图书的书名，第04行和第05行的分别封装了图书封面的缩略图和放大图的文件名称，第06行使用字符数据段封装了图书的主要内容介绍。存储第二本图书内容的XML文档(Book2.xml)结构与Book1.xml一致。程序名称：ch9-1.html

01<html>

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

03</script>

04<scriptlanguage="javascript">

05//处理返回信息的函数

06functionprocessRequest()

07{

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

09{10//信息已经成功返回，开始处理信息

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(); //默认加载项

28</script>

29<body>30<ahref="javascript:voidtab1();">软件系统开发技术(修订版)<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文件包含函数send_request，函数send_request的主要作用是向服务器发送异步HTTP请求，工作流程在9.3节中已经作了详细分析，这里不再重复。

第30行和第31行产生两个以书名为标题的超链接，即两个选项卡，当单击选项卡时(如单击第30行超链接)，将激发异步请求事件(如第25行从服务器请求“Book1.xml”文档)。第21行至第22行处理客户端的请求链接URL，并在第23行调用send_request函数向服务器请求包含图书具体内容的URL(如包含Book1.xml)。第06行的函数processRequest用于处理服务器的信息反馈。当服务器的数据下载到客户端后，触发processRequest事件，并执行第07行至第18行的事件代码。第11行代码获取层对象tabDiv，第14和第15行从服务器返回的XML中提取图书的主要内容简介填写到层tabDiv中，即图9-3中的矩形框内，从而完成页面的局部更新。

当点击不同的选项卡时，将异步获取不同的内容填充到图9-3中的矩形框内。页面局部更新，不需要整体刷新。9.4.2读取更多内容

图9-4和图9-5展示了一个使用具体内容文本替换链接文本的例子。在图9-4中单击图书标题后的“更多…”超链接，超链接处的文本将被图9-5中的图书具体内容代替。图9-4替换超链接前的页面图9-5点击图9-4中“更多…”超链接后的页面

【例9-3】

案例说明：本案例演示使用AJAX技术获取更多的文本数据替换被单击的链接。

程序名称：ch9-2.html

01<html>

02<head>

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

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

05</script>

06<scriptlanguage="javascript">07//处理返回信息的函数

08functionprocessRequest()

09{

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

11{

12//信息已经成功返回，开始处理信息

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>软件系统开发技术</h1>

32软件系统开发技术(修订版):33<spanid="moreSpan">

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

35</span>

36</body>

37</html>案例分析：程序9-2.html中第33行至第35行定义<span>标记，标记中放一超链接，使用函数getMore请求“Book1.xml”文档。第22行至第27行的getMore函数设置包含Book1.xml文件名称的URL，并调用send_request函数向服务器异步请求Book1.xml文档。

第08行至第20行的响应事件processRequest将服务器返回的XML中的图书简介内容填充到名称为moreSpan的<span>标记中。这样做的好处是可以在无需刷新页面的情况下获得更多内容。9.4.3异步读取XML数据

图9-6展示了异步读取图书信息的例子。单击左边的图书标题，包含图书具体内容的XML文档将显示在右边的矩形区域中。异步读取图书的处理信息显示在下面的矩形框中。图9-6异步读取XML数据

【例9-4】

案例说明：程序ch9-3.html异步读取存储图书内容简介的XML文档内容，并显示在HTML页面中，同时给出异步调用各个阶段的处理状态。下面给出部分核心代码。程序名称：ch9-3.html

01<scriptlanguage="javascript">

02//处理返回信息的函数

03functionprocessRequest()

04{

05//信息已经成功返回，开始处理信息

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

08switch(http_request.readyState)

09{

10case1:

11objStatus.innerHTML+="正在加载数据...<br>";

12break;

13case2:

14objStatus.innerHTML+="数据加载完毕...<br>";

15break;16case3:

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

18break;

19case4:

20objStatus.innerHTML+="就绪，应答返回状态为："+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函数构造请求具体图书信息的URL，调用send_request函数向服务器发送HTTP请求。参数fname为调用函数传递过来的XML文件名称。

响应回调事件processRequest中的第08行至第25行多分支选择条件语句switch，根据返回的当前请求状态码，将处理的详细过程信息显示在图9-6中下面的矩形框中。下面的矩形框使用层对象“objStatus”勾画。当处理到状态4时(第19行)，XML数据下载完毕，并显示在右边的矩形框中(第21行至第23行)。右边的矩形框用层对象“conntent”勾画。9.4.4更换多个HTML片段

Web应用程序中的一个常见问题是在响应用户输入时，必须更新显示页面中的一些区域。举例来说，在一个股票报价应用程序中，显示页面的一部分可能会展示最近的报价，而另一部分则显示最近报价的列表。

为更新显示页面中的多个区域，可以使用服务器的XML响应，它包含每个部分的数据，数据可以使用包含HTML标记的字符数据段。当XML数据下载到客户端后，将读取不同XML字段，并填充到页面的不同区域。

【例9-5】

案例说明：本例中的XML文档(BookData.xml)元素使用字符数据段存储HTML文档的片段。程序名称：BookData.xml

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

02<Book>

03<Title><![CDATA[<fontsize='4'color='red'>软件系统开发技术(修订版)

</font>]]></Title>

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

05<Publisher><![CDATA[<b>西安电子科技大学出版社</b>]]></Publisher>06<PubDate><![CDATA[2001年1月]]></PubDate>

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

08<Abstract><![CDATA[本书介绍大型软件系统的开发技术，主要是目前软件界最为流行，也较实用的结构化方法，包括支持这一方法的工具和环境；还简述了其他一些方法和技术，<u><fontcolor='blue'>如Jackson方法</font></u>、面向对象的软件开发方法、测试和维护技术以及数据库设计等，使材料更系统化，并有所比较。]]></Abstract>

09</Book>案例分析：程序BookData.xml存储了一本图书的信息，元素字段中的数据包含HTML格式化显示标记。第03行“<fontsize=‘4’color=‘red’>软件系统开发技术(修订版)</font>”使用4号红色字体显示图书的标题。第04行“<u><i>潘锦平，施小英，姚天昉</i></u>”使用斜体加下划线显示作者名称。第05行“<b>西安电子科技大学出版社</b>”使用粗体显示出版社名称。第08行“<u><fontcolor=‘blue’>如Jackson方法</font></u>”使用蓝色字体加下划线显示文字“如Jackson方法”。

案例说明：程序ch9-4.html中的异步回调函数processRequest()将从服务器端获取的多段HTML片段分别加载到客户端页面的六个层对象中。下面给出核心代码。程序名称：ch9-4.html

01<scriptlanguage="javascript">

02//处理返回信息的函数

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行获取服务器返回的XML文档字段中的内容并填充到页面不同的层对象中。程序执行的结果如图9-7所示，XML文档字段中的HTML的格式化显示标记获得正确执行。图9-7加载多段HTML文档9.4.5数据校验

在输入form表单内容时，通常需要确保数据的唯一性，因此，常常在页面上提供“唯一性校验”按钮，让用户点击，打开一个校验小窗口；或者等form提交到服务器端，由服务器判断后再返回相应的校验信息。前者，window.open操作本来就是比较耗费资源的，通常由window.showModalDialog代替，即使这样也要弹出一个对话框；后者，需要把整个页面提交到服务器并由服务器判断校验，这个过程不仅时间长而且加重了服务器负担。而使用AJAX，这个校验请求可以由XMLHttpRequest对象发出，整个过程不需要弹出新窗口，也不需要将整个页面提交到服务器，快速又不加重服务器负担。

【例9-6】

案例说明：本案例演示用户名唯一性校验。当用户在图9-8的文本框中填写用户名并单击“唯一性检查”按钮时，程序ch9-5.html将提取文本框的内容向服务器发HTTP请求，服务器程序ch9-5.asp获取用户名进行用户名唯一性校验，并异步传回校验结果。

以下为程序ch9-5.html中的部分代码。

1．定义表单

以下程序段在<body></body>之间增加一段form表单代码。第04行的文本框用于接收用户名输入。第05行的Button按钮用于启用事件userCheck()向服务器发用户名唯一性检验的HTTP请求。第08行的层checkResult用于显示检验的结果提示。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．发唯一性检验的HTTP请求

第05行至第09行先做客户端的检验，当文本框为空时，提示用户名不能为空。当用户名不为空时，执行第12行至第15行的请求代码。第12行构造向服务器请求程序ch9-5.asp的url，第14行将文本框中获取的用户名附加到url后，第15行调用send_request函数发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．响应服务器端的回复

第06行获取服务器端的检验结果，如果检验结果为“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．服务器端的验证处理

程序ch9-5.asp为服务器端的程序。第03行接收客户端发送的用户名，第04行将文本字符串转换为对象。函数isUsernameExist中第09行至第21行对用户名进行检验，第14行至第16行预置了三个用户名称“user1”、“user2”、“user3”，当客户端输入的用户名与这三个用户名之一匹配时，检验通过，否则不能通过。第07行调用isUsernameExist检验函数将检验结果输出到客户端，输出值为逻辑值。实际使用时，检验函数isUsernameExist可以完成与数据库的交互，从数据中获取用户名进行校验，更具有实际意义。程序名称：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中的程序用户名验证通过后的结果显示。图9-8用户名唯一性校验

9.5综合实例

本节为图书管理系统编写一个检索读者基本信息的查询子系统，界面如图9-9所示。当读者正确输入借书证号、用户密码，单击“查询信息”按钮，在矩形框中输出读者的详细信息。如果读者不输入借书证号和密码，系统将提示借书证号和用户密码不能为空。如果读者输入错误的借书证号和密码，则系统在矩形框中给出找不到用户的信息提示。图9-9查询用户基本信息

1．设计数据库表

创建数据库BookLibary，添加用户表users，用户表的基本结构和数据类型如表9-3所示。其中用户性别gender的值“1”表示“男”，“0”表示“女”。用户类别“usertype”的值“1”表示“教师”，“2”表示“学生”，“3”表示“其他人员”。表9-3用户基本信息表

2．设计页面表单

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

第01行为客户端的数据岛，加载转换程序，将服务器返回的XML文档转换为HTML标记并显示在第10行的层中。

第05行和第06行分别设置文本输入框和密码输入框，接收借书证号和密码的输入。第07行的按钮事件userCheck()对文本框和密码框输入的内容进行客户端校验，校验成功则向服务器请求用户信息。第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．设计XSL转换程序

程序Transform.xsl在页面启动时首先被加载到客户端的数据岛中，当服务器端的用户信息下载到客户端后，启用转换程序将XML文档转换为HTML文档并显示。第12行和第13行对返回值的性别做处理，转换为中文的“男”和“女”。同样第19行至第23行将返回值的人员类别码转换为对应的中文汉字。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'">学生</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>联系电话:</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”的层中显示出错信息。校验通过则执行第18行至第21行。第19行构造url向后台的handle_login.asp程序请求读者信息。第20行构造请求字符串。第21行调用send_request函数发异步请求。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}考虑到数据传输的安全性，函数send_request的部分代码需作修改，第03行的HTTP请求为Post请求，第04行setRequestHeader方法设置请求字符串的编码方式，第05行发送带有借书证号和密码字符串的异步请求。01http_request.onreadystatechange=processRequest;

02//确定发送请求的方式和url以及是否同步执行下段代码

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

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

05http_request.send(str);

5．对服务器端返回值的处理

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

第07行至第11行对服务器返回的字符进行解码，并建立XMLDOM对象，将返回的XML字符串加载到对象中。第12行判断返回的XMLDOM对象中是否含有读者信息，如果没有则提示用户名和密码不正确，否则使用存储在客户端数据岛的XSL转换文件对XML进行转换，并将转换的结果写入objDiv.的innerHTML属性中。01functionprocessRequest()

02{

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

04{//查找层对象checkResult用于接收返回结果

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

06//将服务器返回结果存储于文本变量xmlText中07varxmlText=unescape(http_request.responseText);

08//建立XMLDOM对象，接收服务器端返回的XML文档

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

10XMLDom.async=false;//设置为同步方式获取数据

11XMLDom.loadXML