跟我学AJAX技术应用XML +XSLT +AJAX组合技术实现无刷新的数据查询的Web应用示例.docx

（3）searchBook.jsp页面预览示图

2、添加searchBook.js程序文件

（1）searchBook.js程序文件创建的过程示图

（2）输入文件名称searchBook.js

（3）searchBook.js程序的代码示例

varhttpRequest;

functiongetHTTPRequestObject（）

{

varhttpRequestObject;

if（window.XMLHttpRequest）

{//Mozilla,Safari,...

httpRequestObject=newXMLHttpRequest（）;

}

elseif（window.ActiveXObject）

{//IE

try

{

httpRequestObject=newActiveXObject（"Microsoft.XMLHTTP"）;

}

catch（e）

{

try

{

httpRequestObject=newActiveXObject（"Msxml2.XMLHTTP"）;

}

catch（e2）

{

alert（"您的浏览器有问题！

"）;

}

}

}

returnhttpRequestObject;

}

//向searchbookservlet发送请求

functiongetBooks（bookkey）

{

httpRequest=getHTTPRequestObject（）;

varurl="searchbookservlet?

bookkey="+document.getElementById（bookkey）.value;

httpRequest.onreadystatechange=showRetrunBooks;

httpRequest.open（"GET",url,true）;

httpRequest.send（null）;

}

functionshowRetrunBooks（）//将返回的数据显示在指定的节点下

{

if（httpRequest.readyState==4）

{

if（httpRequest.status==200）

{

varallBooksDomDocument=httpRequest.responseXML;

varbookXSLDocument=newActiveXObject（'Microsoft.XMLDOM'）;

bookXSLDocument.async=false;

//直接加载bookDetail.xsl

bookXSLDocument.load（"bookDetail.xsl"）;

document.getElementById（'showBookInfo'）.innerHTML=

allBooksDomDocument.transformNode（bookXSLDocument）;

}

elseif（httpRequest.status==404）

{

document.getElementById（'showBookInfo'）.innerHTML=

"没有找到与所请求的文件相匹配的资源！

";

}

else

{

document.getElementById（'showBookInfo'）.innerHTML=

"你所请求的页面发生异常，错误代码为：

"+httpRequest.status;

}

}

else

{

document.getElementById（'showBookInfo'）.innerHTML="查找中，请稍等...";

}

}

1.1.2添加bookDetail.xsl文件

1、在项目中添加bookDetail.xsl文件

（1）bookDetail.xsl文件创建的过程示图

（2）bookDetail.xsl文件的代码示例

xmlversion="1.0"encoding="gb2312"?

>

stylesheetxmlns:

xsl="http:

//www.w3.org/TR/WD-xsl">

templatematch="/">

您搜索的书籍如下：

apply-templatesselect="Books"/>

template>

templatematch="Books">

书名

作者

出版社

价格

出版时间

内容简介

apply-templatesselect="Book"/>

template>

templatematch="Book">

value-ofselect="BookName"/>

value-ofselect="Writer"/>

value-ofselect="Publisher"/>

value-ofselect="Price"/>

value-ofselect="PublishTime"/>

value-ofselect="Content"/>

>

template>

stylesheet>

1.1.3添加后台JavaServlet程序

1、添加SearchBookServlet程序类

（1）程序类名称为SearchBookServlet，程序包名称为com.px1987.webajax.servlet

（2）该Servlet的名称为searchbookservlet

（3）编程该Servlet中的doGet方法

packagecom.px1987.webajax.servlet;

importjava.io.IOException;

importjava.io.PrintWriter;

importjavax.servlet.ServletException;

importjavax.servlet.http.HttpServlet;

importjavax.servlet.http.HttpServletRequest;

importjavax.servlet.http.HttpServletResponse;

importorg.jdom.*;

importorg.jdom.output.*;

publicclassSearchBookServletextendsHttpServlet{

DocumentxmlDoc=null;

publicvoiddoGet（HttpServletRequestrequest,HttpServletResponseresponse）

throwsServletException,IOException{

StringbookName=request.getParameter（"bookkey"）;

//然后根据bookName查询数据库表以获得具体的结果数据，在此加以省略

buildBooksXMLTree（）;

response.setContentType（"text/xml;charset=gb2312"）;

response.setHeader（"Cache-Control","no-cache"）;

PrintWriterout=response.getWriter（）;

responseXMLDataToBrowser（out）;

out.close（）;

}

//利用JDom动态地创建XML的节点树

publicvoidbuildBooksXMLTree（）

{

treeRoot=newElement（"Books"）;

xmlDoc=newDocument（treeRoot）;

/**

ProcessingInstructionpi=

newProcessingInstruction（"xml-stylesheet","href=\"bookDetail.xsl\"type=\"text/xsl\""）;

xmlDoc.addContent（pi）;

*/

tagName=newElement（"Book"）;

treeRoot.addContent（tagName）;

//下面的数据实际应该来自于数据库表

childTagName=newElement（"BookName"）;

childTagName.setText（"AJAX技术与应用"）;

tagName.addContent（childTagName）;

childTagName=newElement（"Writer"）;

childTagName.setText（"张三"）;

tagName.addContent（childTagName）;

childTagName=newElement（"Publisher"）;

childTagName.setText（"电子工业出版社"）;

tagName.addContent（childTagName）;

childTagName=newElement（"Price"）;

childTagName.setText（"45.5"）;

tagName.addContent（childTagName）;

childTagName=newElement（"PublishTime"）;

childTagName.setText（"2007年12月"）;

tagName.addContent（childTagName）;

childTagName=newElement（"Content"）;

childTagName.setText（"本书是介绍AJAX技术与应用方面的图书"）;

tagName.addContent（childTagName）;

}

publicvoidresponseXMLDataToBrowser（PrintWriterout）throwsIOException

{

Formatformat=Format.getCompactFormat（）;

format.setEncoding（"gb2312"）;

format.setIndent（""）;

XMLOutputterXMLOut=newXMLOutputter（format）;

//XMLOut.setNewlines（true）;//设置回行标志

XMLOut.output（xmlDoc,out）;

}

}

2、导入JDom的系统包文件

（1）选择JDom的系统包文件

（2）最终导入的结果示图

3、部署和执行该Servlet

4、启动Tomcat服务器

1.1.4测试示例的应用效果

1、执行本功能http:

//127.0.0.1:

8080/AJAXWebApp/searchBook.jsp

2、将出现下面的结果