软件项目实训及课程设计指导——如何应用XML +XSLT +AJAX组合技术实现无刷新的数据查询的应用实例

1、在Web应用系统项目中添加一个实现查询的请求页面searchBook.jsp

(1)创建searchBook.jsp页面文件的过程示图

在MyEclipse开发工具中选择文件中的新建菜单项目，然后创建出一个JSP页面文件，文件名称为searchBook.jsp，创建searchBook.jsp页面文件的过程示图参看如下的示例图所示。

(2)searchBook.jsp页面最终的代码示例如下，在页面中包含有一个简单的查询表单

请输入书名：

2、在Web应用系统项目中添加一个searchBook.js程序文件

(1)searchBook.js程序文件创建的过程示图

在MyEclipse开发工具中选择文件中的新建菜单项目，然后创建出一个JavaScript脚本类型的*.js文件，文件名称为searchBook.js，创建searchBook.js脚本文件的过程示图参看如下的示例图所示。

(2)输入文件名称searchBook.js，并点击"完成"按钮, 创建的过程示图参看如下的示例图所示。

(3)searchBook.js程序的代码示例

var httpRequest;function getHTTPRequestObject(){ var httpRequestObject; if (window.XMLHttpRequest){ // 适用于Mozilla, Safari 等浏览器, ...httpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject){ //适用于 IE等浏览器, ...try{httpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");}catch (e){ try{ httpRequestObject= new ActiveXObject("Msxml2.XMLHTTP"); } catch (e2){ alert("您的浏览器有问题！"); }}} return httpRequestObject;}function getBooks(bookkey){ //向searchbookservlet发送请求httpRequest=getHTTPRequestObject();var url="searchbookservlet?bookkey="+document.getElementById(bookkey).value;httpRequest.onreadystatechange = showRetrunBooks;httpRequest.open("GET",url,true);httpRequest.send(null);}function showRetrunBooks() { //将返回的数据显示在指定的节点下if (httpRequest.readyState == 4) {if (httpRequest.status == 200){var allBooksDomDocument =httpRequest.responseXML;var bookXSLDocument = new ActiveXObject('Microsoft.XMLDOM');bookXSLDocument.async=false; //直接加载bookDetail.xslbookXSLDocument.load("bookDetail.xsl");document.getElementById('showBookInfo').innerHTML=allBooksDomDocument.transformNode(bookXSLDocument);}else if(httpRequest.status == 404){document.getElementById('showBookInfo').innerHTML ="没有找到与所请求的文件相匹配的资源！";}else{document.getElementById('showBookInfo').innerHTML ="你所请求的页面发生异常，错误代码为："+httpRequest.status;}}else{document.getElementById('showBookInfo').innerHTML = "查找中，请稍等...";}}

3、在Web应用系统项目中添加一个bookDetail.xsl文件

(1)bookDetail.xsl文件创建的过程示图

在MyEclipse开发工具中选择文件中的新建菜单项目，然后创建出一个XSLT转换文件，文件名称为bookDetail.xsl，创建bookDetail.xsl文件的过程示图参看如下的示例图所示。

(2)bookDetail.xsl文件的代码示例

<?xml version="1.0" encoding="gb2312" ?>

您搜索的书籍如下：

4、在Web应用系统项目中添加后台Java Servlet程序

(1)程序类名称为SearchBookServlet，程序包名称为com.px1987.webajax.servlet

在MyEclipse开发工具中选择文件中的新建菜单项目，然后创建出一个Servlet类型的文件，程序类名称为SearchBookServlet，程序包名称为com.px1987.webajax.servlet，创建SearchBookServlet程序的过程示图参看如下的示例图所示。

(2)该Servlet的名称为searchbookservlet，参看如下的示例图所示。

(3)编程该Servlet中的doGet方法

package com.px1987.webajax.servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.jdom.*;import org.jdom.output.*;public class SearchBookServlet extends HttpServlet {Document xmlDoc=null;public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { String bookName=request.getParameter("bookkey"); //然后根据bookName查询数据库表以获得具体的结果数据，在此加以省略 buildBooksXMLTree(); response.setContentType("text/xml; charset=gb2312"); response.setHeader("Cache-Control", "no-cache"); PrintWriter out = response.getWriter(); responseXMLDataToBrowser(out); out.close();}public void buildBooksXMLTree() { //利用JDom动态地创建XML的节点树 treeRoot=new Element("Books"); xmlDoc=new Document(treeRoot); tagName=new Element("Book"); treeRoot.addContent(tagName); /**下面的数据在实际系统中应该来自于数据库表，为了简化示例在程序中动态创建出对应的XML标签 */ childTagName=new Element("BookName"); childTagName.setText("AJAX技术与应用"); tagName.addContent(childTagName); childTagName=new Element("Writer"); childTagName.setText("张三"); tagName.addContent(childTagName); childTagName=new Element("Publisher"); childTagName.setText("电子工业出版社"); tagName.addContent(childTagName); childTagName=new Element("Price"); childTagName.setText("45.5"); tagName.addContent(childTagName); childTagName=new Element("PublishTime"); childTagName.setText("12月"); tagName.addContent(childTagName); childTagName=new Element("Content"); childTagName.setText("本书是介绍AJAX技术与应用方面的图书"); tagName.addContent(childTagName);}public void responseXMLDataToBrowser(PrintWriter out) throws IOException{ Format format=Format.getCompactFormat(); format.setEncoding("gb2312"); format.setIndent(" "); XMLOutputter XMLOut=new XMLOutputter(format); XMLOut.output(xmlDoc,out);}}

5、在Web应用系统项目中导入JDom的系统包文件，实现对XML文档的动态解析

在Web应用系统项目中导入JDom的系统包文件jdom.jar，利用JDom实现对XML文档的动态解析，参看如下的示例图所示。

6、部署Web应用系统项目和启动服务器

(1)部署Web应用系统项目

(2)启动Tomcat服务器

7、测试本示例的应用功能的正确性

(1)启动测试页面，并在查询表单中输入查询的数据(本示例为某书名)

(2)点击测试页面中的Web表单内的"搜索"按钮后将出现如下的查询结果

查询的结果是来自于服务器端处理的结果，并且直接在Web表单的下面显示，页面没有产生传统的Web页面的提交后页面更换的效果。

课程设计指导——应用AJAX技术提高Web应用的整体响应性能

如何在J2EE平台开发基于Velocity模板的Web应用

如何在Web应用系统表示层开发中应用Velocity模板技术

应用XML+XSLT技术分离Web应用表示层数据和样式的实例

如何应用“XML+XSLT”技术分离Web表示层数据和样式