如何应用XML+XSLT+AJAX组合技术实现无刷新数据查询
toyiye 2024-09-19 04:46 2 浏览 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应用的整体响应性能
如何在Web应用系统表示层开发中应用Velocity模板技术
相关推荐
- 为何越来越多的编程语言使用JSON(为什么编程)
-
JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...
- 何时在数据库中使用 JSON(数据库用json格式存储)
-
在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...
- MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)
-
前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...
- JSON对象花样进阶(json格式对象)
-
一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...
- 深入理解 JSON 和 Form-data(json和formdata提交区别)
-
在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...
- JSON 语法(json 语法 priority)
-
JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...
- JSON语法详解(json的语法规则)
-
JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...
- MySQL JSON数据类型操作(mysql的json)
-
概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...
- JSON的数据模式(json数据格式示例)
-
像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...
- 前端学习——JSON格式详解(后端json格式)
-
JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...
- 什么是 JSON:详解 JSON 及其优势(什么叫json)
-
现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...
- PostgreSQL JSON 类型:处理结构化数据
-
PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...
- JavaScript:JSON、三种包装类(javascript 包)
-
JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...
- Python数据分析 只要1分钟 教你玩转JSON 全程干货
-
Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...
- 比较一下JSON与XML两种数据格式?(json和xml哪个好)
-
JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- r语言矩阵 (127)
- browsererror (114)
- exportexcel (119)
- cv2.bitwise_not (137)
- dump命令 (128)
- es6concat (126)
- heapify (127)
- java.security.egd (130)
- javax.annotation (117)
- jsstringsplit (117)
- js数字 (115)
- maven编译 (132)
- mysqlleft (128)
- nodejsbuffer (149)
- org.apache.commons.httpclient (126)
- org.jsoup (141)
- org.springframework.web (128)
- robotframework-ride (115)
- setnocounton (141)
- socket.gethostbyname (122)
- sqlmid (121)
- time.strptime (133)
- vscode格式化 (125)
- win32con (129)
- window.localstorage (126)