軟體專案實訓及課程設計指導——如何應用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指令碼檔案的過程示圖參看如下的示例圖所示。
（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）啟動測試頁面，並在查詢表單中輸入查詢的資料（本示例為某書名）
查詢的結果是來自於伺服器端處理的結果，並且直接在Web表單的下面顯示，頁面沒有產生傳統的Web頁面的提交後頁面更換的效果。