如何應用XML+XSLT+AJAX組合技術實現無刷新的數據查詢的應用實例

2020-12-22 楊教授工作室

軟體項目實訓及課程設計指導——如何應用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;

varbookXSLDocument= 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應用系統的整體響應性能

如何在Web應用中實現Velocity 與Struts2框架相互集成的應用實例

如何在Web應用中實現Velocity 與Struts 框架相互集成的應用實例

如何利用MyEclipse開發工具開發基於Velocity模板的Web應用

如何在Web應用系統表示層開發實現中應用Velocity模板技術

相關焦點

  • 應用XML+XSLT技術分離Web應用系統中表示層數據和樣式的實例
    軟體項目實訓及課程設計指導——應用XML+XSLT技術分離Web應用系統中表示層數據和樣式的實例1、在J2EE應用系統中應用XSLT實現XML文檔轉換的基本過程（1）首先，創建出目標XML格式文檔文件，該XML格式文檔文件代表應用系統中的數據模型
  • 課程設計指導——如何應用XML+XSLT技術分離Web表示層數據和樣式
    軟體項目實訓及課程設計指導——如何應用XML+XSLT技術分離Web表示層數據和樣式1、「XML+XSLT」技術在J2EE技術平臺中的應用Java語言及相關的應用技術的產生解決了跨平臺的軟體應用系統的開發，但沒有解決如何實現跨平臺的數據交換問題。
  • 如何優化Web應用數據訪問實現方式以提高軟體應用系統的響應性能
    軟體項目實訓及課程設計指導——如何優化Web應用數據訪問實現方式以提高軟體應用系統的響應性能在軟體應用系統中離不開數據訪問和數據處理兩個方面的功能，而數據處理之前首先要進行數據訪問，也就是只有快速地獲得了數據，才能進行下一步的數據處理。
  • 如何在Web應用中實現Velocity 與Struts2框架相互集成的應用實例
    軟體項目實訓及課程設計指導——如何在Web應用系統中實現Velocity 與Struts2框架相互集成的應用實例1、Struts 2應用框架提供對 Velocity 和 FreeMarker 模板引擎的支持在Struts 2應用框架中不僅繼續保留有對Velocity
  • 課程設計指導——應用AJAX技術提高Web應用系統的整體響應性能
    因此，在Web應用系統開發實現中為了能夠提高系統的響應性能，有必要應用AJAX技術。如下示例中的數據邊輸入邊查詢，是通過應用異步交互而無需刷新整個頁面內容所產生的應用效果。（2）Google Suggest站點當用戶在輸入框輸入相關的查詢關鍵字時，Google Suggest系統獲取用戶的輸入並實時地發送到後臺Web伺服器查詢出對應匹配的結果——這在技術實現上稱為「自動補全」，請讀者注意「自動補全」其實是AJAX技術的一個典型的應用。
  • 如何應用EhCache緩存框架提高J2EE Web應用系統持久層的響應性能
    軟體項目實訓及課程設計指導——如何應用EhCache緩存框架提高應用系統持久層響應性能1、在Web應用系統中應用持久層相關的緩存框架在Java應用程式開發實現和J2EE Web應用系統的設計和開發實現中，軟體應用系統的設計和開發實現人員可以在系統的表示層和系統的持久層中充分地應用緩存機制和相應實現技術能夠大大地提高
  • 課程設計指導——如何應用OSCache緩存框架提高Web頁面響應性能
    在Java應用程式開發實現和J2EE Web應用系統的設計和開發實現中，軟體應用系統的設計和開發實現人員可以在系統的表示層和系統的持久層中充分地應用緩存機制和相應實現技術能夠大大地提高Web應用系統的訪問性能。
  • 課程設計指導——如何應用Java反射技術靈活地創建程序類對象實例
    軟體項目實訓及課程設計指導——如何應用Java反射技術靈活地創建程序類的對象實例1、如何應用屬性配置文件實現對系統中的配置信息進行讀寫操作Java中的屬性配置文件主要可以作為軟體應用系統及項目的配置文件，比如許多J2EE的開源框架系統中都提供了屬性配置文件作為該應用框架的對外配置文件
  • 如何正確地創建和銷毀軟體應用系統中JDBC資料庫連接對象實例
    軟體項目實訓及課程設計指導——如何正確地創建和銷毀軟體應用系統中JDBC資料庫連接對象實例1、Java語言中提供有訪問資料庫系統的JDBC編程接口Java 資料庫連接技術（JDBC，Java DataBase Connectivity）其實是將Java語言與標準的
  • 如何應用Web頁面靜態化技術以提高J2EE Web應用系統的響應性能
    當然，讀者如果熟悉Web頁面靜態化技術的實現原理後，也可以自己編程實現。在Web應用系統的表示層開發中如何通過應用Velocity模板技術以提高Web應用系統的響應性能，作者在以前的文章中的做了詳細的介紹，有興趣的讀者可以翻看文章《軟體項目實訓及課程設計指導——如何在Web應用系統表示層開發實現中應用Velocity模板技術》。
  • 原生Ajax和jquery的ajax有什麼區別?
    )，但是它不是像HTML、JavaScript或CSS這樣的一種「正式的」技術，它是表示一些技術的混合交互的一個術語（JavaScript、Web瀏覽器和Web伺服器），它使我們可以獲取和顯示新的內容而不必載入一個新的Web頁面。
  • 如何在Web應用系統表示層開發實現中應用Velocity模板技術
    軟體項目實訓及課程設計指導——如何在Web應用系統表示層開發實現中應用Velocity模板技術1、分離Web表示層的數據處理和展現邏輯的常見的應用技術分離Web表示層的數據處理和展現邏輯是目前企業級的Web應用系統開發中表現層組件開發實現中的基本實現目標。
  • 使用jQuery的ajax技術+JSON數據格式+C#+SQL Server實現數據顯示
    技術，本身就是一種很輕的數據操作方法，可以通過ajax技術從遠程的伺服器上拉取數據，這樣做就可以實現單向的拿出數據，然後斷開連接，剩下的就是在客戶端進行操作了，是一種很輕量級的操作數據的方法。這裡使用jQuery的ajax技術+JSON格式的數據+SQL Server資料庫來實現數據以表格形式顯示的功能。
  • 大數據的應用實例展示:生活中的大數據
    大數據、雲計算、人工智慧、物聯網……新的概念不斷湧出，並且隨著技術的成熟，也在實際的應用當中不斷拓展，逐漸影響我們的生活。以大數據來說，聽起來「高大上」，感覺離我們很遠，實際上卻並非如此。今天我們就來聊聊，大數據的應用實例，生活中的大數據例子。
  • jQuery的$.get()、$.post()和$.ajax()以GET/POST方式請求數據
    在jQuery的Ajax技術中，可以使用的有3個方法：$.get()方法主要用於以HTTP GET的方式請求數據。$.post()方法主要用於以HTTP POST的方式請求數據。$.ajax()功能最為強大，一般情況下，獲取數據的GET請求和提交數據的POST請求，都可以使用$.ajax()方法來實現。
  • Ajax詳解
    Ajax不是一門程式語言，指的是一種交互方式：客戶端與伺服器交換數據並更新在局部網頁的技術，不需要重新加載整個頁面。Ajax的核心就是異步加載或者叫局部刷新。什麼是局部刷新？通過一個直觀的例子來了解。需求1.點擊提交按鈕，向伺服器發請求，等待響應。2.同時在input框輸入信息。
  • 如何正確地創建和銷毀軟體應用系統中網絡通訊中的Socket對象實例
    在程序中應用埠號時需要注意埠號的範圍，埠號其實是一個16位無符號整數，數值範圍是0-65535；低於256的埠號保留給標準的應用程式使用，比如pop3的埠號就是110。（3）基於Socket通訊的主要過程通訊的主要過程包括Socket的建立、監聽、連接、發送數據和接收數據等環節。
  • 網絡安全分析之中,大數據技術的應用!
    1、大數據技術在安全分析中的應用背景1.1、大數據技術的內涵分析大數據技術實際上就是以網絡環境為基礎，對現代信息化社會背景下產生的需要處理的大批量的數據和信息通過集成搜集和傳輸的大批量的數據形式的信息進行集合和統一分析，且在此技術的功能要點上來講，其既能實現數據分析的大批量需求，更能同時保障數據分析和整理的準確性。
  • 如何保證軟體應用系統架構設計結果的可擴展性和可重用性(上篇)
    每一層最多只影響其相關聯的上、下兩層，同時只要給相鄰的上、下層提供接口或者實現接口，從而也就能夠允許每層使用不同的方法包括不同的技術來實現，因此為軟體應用系統的可重用提供了強大的結構支持。利用控制反轉技術能夠消解框架系統和軟體應用系統之間的依賴關係——因為利用「控制反轉」技術能夠減少對象的請求者對服務提供者的特定功能實現邏輯的依賴，此時系統中的各個組件類不再需要自己去查找或者實例化它們所依賴的其它目標組件類的對象實例。
  • Tomcat核心組件及應用架構詳解
    於是 Sun 公司推出了 Servlet 技術。你可以把 Servlet 簡單理解為運行在服務 端的 Java 小程序，但是 Servlet 沒有 main 方法，不能獨立運行，因此必須把 它部署到 Servlet 容器中，由容器來實例化並調用 Servlet。而 Tomcat 就是一個 Servlet 容器。