利用XML +XSLT +AJAX技术实现的无刷新的查询

目录1.1利用XML+XSLT+AJAX技术实现的无刷新的查询 (2)1.1.1构建相关的Web应用项目 (2)1.1.2添加bookDetail.xsl (6)1.1.3添加后台Java Servlet程序 (9)1.1.4测试示例的应用效果 (14)1.1利用XML+XSLT+AJAX技术实现的无刷新的查询1.1.1构建相关的Web应用项目1、添加一个实现查询的请求页面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">&nbsp;&nbsp;&nbsp;&nbsp;<input type="button"name="search"value="搜索"onclick=getBooks('bookkey')> <div id="showBookInfo"></div></form>2、添加searchBook.jsvar httpRequest;function getHTTPRequestObject(){var httpRequestObject;if(window.XMLHttpRequest){//Mozilla,Safari,...httpRequestObject=new XMLHttpRequest();}else if(window.ActiveXObject){//IEtry{httpRequestObject=new ActiveXObject("Microsoft.XMLHTTP");}catch(e){try{httpRequestObject=new ActiveXObject("Msxml2.XMLHTTP");}catch(e2){alert("您的浏览器有问题！");}}}return httpRequestObject;}//向searchbookservlet发送请求function getBooks(bookkey){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;bookXSLDocument.load("bookDetail.xsl");//直接加载bookDetail.xsldocument.getElementById('showBookInfo').innerHTML=allBooksDomDocument.transformNod e(bookXSLDocument);}else if(httpRequest.status==404){document.getElementById('showBookInfo').innerHTML="没有找到与所请求的文件相匹配的资源！";}else{document.getElementById('showBookInfo').innerHTML="你所请求的页面发生异常，错误代码为："+httpRequest.status;}}else{document.getElementById('showBookInfo').innerHTML="查找中，请稍等...";}}1.1.2添加bookDetail.xsl1、在项目中添加bookDetail.xsl文件内容如下<?xml version="1.0"encoding="gb2312"?><xsl:stylesheet xmlns:xsl="/TR/WD-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>1.1.3添加后台Java Servlet程序1、添加searchbookservlet（1）类名称为SearchBookServlet，包名称为com.px1987.webajax.servlet（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);//ProcessingInstruction pi=new ProcessingInstruction("xml-stylesheet","href=\"bookDetail.xsl\"type=\"text/xsl\"");//xmlDoc.addContent(pi);tagName=new Element("Book");treeRoot.addContent(tagName);//下面的数据实际应该来自于数据库表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.setNewlines(true);//设置回行标志XMLOut.output(xmlDoc,out);}}2、导入JDom的系统包文件3、部署和执行该Servlet启动服务器1.1.4测试示例的应用效果1、执行本功能http://127.0.0.1:8080/AJAXWebApp/searchBook.jsp将出现下面的结果。