网站首页 > 教程分享正文

如何应用XML+XSLT+AJAX组合技术实现无刷新数据查询

henian88 2024-09-08 04:41:59 教程分享 7 ℃ 0 评论

软件项目实训及课程设计指导——如何应用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="http://www.w3.org/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>

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模板技术