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

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

（1）创建searchBook.jsp页面文件的过程示图

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

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

<%@ page contentType="text/html; charset=gb2312" %><script language="javascript" src="searchBook.js"></script><form name="search" method="post" action="">      请输入书名：<input id="bookkey" type="text" size="20" >      <input type="button" name="search" value="搜索" onclick=getBooks('bookkey')>      <div id="showBookInfo"></div></form>

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.xsl                bookXSLDocument.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" ?><xsl:stylesheet xmlns:xsl=";>      <xsl:template match="/">          <h2>您搜索的书籍如下：</h2> <xsl:apply-templates select="Books"/>      </xsl:template>      <xsl:template match="Books">          <Table border="1" width="80%">              <TR><TD>书名</TD><TD>作者</TD><TD>出版社</TD><TD>价格</TD><TD>出版时间</TD><TD>内容简介</TD></TR>              <xsl:apply-templates select="Book"/>          </Table>      </xsl:template>      <xsl:template match="Book">            <TR>                  <TD><xsl:value-of select="BookName"/></TD>                  <TD><xsl:value-of select="Writer"/></TD>                  <TD><xsl:value-of select="Publisher"/></TD>                  <TD><xsl:value-of select="Price"/></TD>                  <TD><xsl:value-of select="PublishTime"/></TD>                  <TD><xsl:value-of select="Content"/></TD>            </TR>      </xsl:template></xsl:stylesheet>

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("2007年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表示层数据和样式