ajax解析XML文档--书名征服Ajax——Web 2.0快速入门与项目实践（Java）

于 2008-04-24 20:14:41 发布
阅读量118 收藏
点赞数
分类专栏： ajax 文章标签： Ajax XML Web Java 浏览器
本文介绍了解析XML文档的方法及Ajax技术的应用实例，包括在HTML页面中读取XML数据、处理Ajax响应、发送请求参数等，并展示了如何实现页面拖拽效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

案例4-2 解析XML文档

在Eclipse中新建一个项目，项目的名称为“P42_XMLDOM”。首先，新建一个HTML文档，页面名称为“readXML.jsp”。 该页面实现的效果如图4-4所示。用户单击“测试”按钮，页面中显示从对应XML文档中解析获得的数据信息。


图4-4 在JavaScirpt脚本中解析XML文档的效果

在该例中实现的是从XML文档中读取指定位置的数据信息，然后在HTML页面中进行显示，本例中所使用的XML文档的源代码如下：

<?xml version="1.0" encoding="UTF-8"?>

<classmates>

<student >

<sid>1</sid>

<sname>张桂元</sname>

<gre>1700</gre>

<tse>120</tse>

</student>

<student >

<sid>1</sid>

<sname>贾燕枫</sname>

<gre>1800</gre>

<tse>120</tse>

</student>

<student >

<sid>1</sid>

<sname>张宇翔</sname>

<gre>1800</gre>

<tse>120</tse>

</student>

</classmates>

对该XML文档进行解析的HTML页面的源代码如下所示。在该页面中当用户单击“测试”按钮后，将调用“sendRequest()”函数。在该函数中将直接开始读取MyXml.xml文档中的信息。

<head>

<META http-equiv=Content-Type content="text/html; charset=UTF-8">

<LINK href="images/css.css" type=text/css rel=stylesheet>

</head>

<script language="javascript">

var XMLHttpReq;

//创建XMLHttpRequest对象

function createXMLHttpRequest() {

if(window.XMLHttpRequest) { //Mozilla 浏览器

XMLHttpReq = new XMLHttpRequest();

}

else if (window.ActiveXObject) { // IE浏览器

try {

XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {}

}

}

}

// 发送请求的函数

function sendRequest() {

var url = "MyXml.xml";

createXMLHttpRequest();

XMLHttpReq.onreadystatechange = processResponse;

XMLHttpReq.open("GET", url, true);

XMLHttpReq.send(null);

}

// 处理响应的函数

function processResponse() {

if (XMLHttpReq.readyState == 4) { // 判断对象状态

if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息

readXml();

} else { //页面不正常

window.alert("您所请求的页面有异常。");

}

}

}

// 读取XML文档中数据信息的函数，即解析函数

function readXml() {

var students = XMLHttpReq.responseXML.getElementsByTagName("student");

for(var i=0;i<students.length;i++) {

var stud = students[i];

var name = stud.getElementsByTagName("sname")[0].firstChild.data;

var gre = stud.getElementsByTagName("gre")[0].firstChild.data;

var tse = stud.getElementsByTagName("tse")[0].firstChild.data;

document.write(name + "<p>");

document.write(gre + "<p>");

document.write(tse);

document.write("");

}

}



</script>



<table>

<input type="button" value="测试" onclick="sendRequest();"/>

</table>

需要注意的是：在Ajax提交请求时，如果URL地址为文件名称，将开始直接操作对应的XML文档。在进行解析时，首先按照标记名称获取对应的结点数组，然后依据每一个数组元素继续获取子结点的相关信息，层层定位、层层解析。


案例4-3 Ajax的响应处理

在Eclipse中新建一个项目，项目的名称为“P43_Response”。首先，新建一个HTML文档，页面名称为“login.jsp”。 该页面实现的效果如图4-5所示。用户输入对应的登录信息，单击“登录”按钮，页面中将显示登录是否成功的提示信息。


图4-5 登录验证的效果

对应的Web页面的代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<head>

<META http-equiv=Content-Type content="text/html; charset=UTF-8">

</head>

<script language="javascript">

var XMLHttpReq = false;

//创建XMLHttpRequest对象

function createXMLHttpRequest() {

if(window.XMLHttpRequest) { //Mozilla 浏览器

XMLHttpReq = new XMLHttpRequest();

}

else if (window.ActiveXObject) { // IE浏览器

try {

XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {}

}

}

}

//发送请求函数

function sendRequest(url) {

createXMLHttpRequest();

XMLHttpReq.open("GET", url, true);

XMLHttpReq.onreadystatechange = processResponse;//指定响应函数

XMLHttpReq.send(null); // 发送请求

}

// 处理返回信息函数

function processResponse() {

if (XMLHttpReq.readyState == 4) { // 判断对象状态

if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息

var res=XMLHttpReq.responseText;

window.alert(res);

} else { //页面不正常

window.alert("您所请求的页面有异常。");

}

}

}

// 身份验证函数

function userCheck() {

var uname = document.myform.uname.value;

var psw = document.myform.psw.value;

if(uname=="") {

window.alert("用户名不能为空。");

document.myform.uname.focus();

return false;

}

else {

sendRequest('login?uname='+ uname + '&psw=' + psw);

}

}



</script>



<body vLink="#006666" link="#003366" bgColor="#E0F0F8">

<img height="33" src="enter.gif" width="148">

<form action="" method="post" name="myform">

用户名： <input size="15" name="uname"><p>

密  码： <input type="password" size="15" name="psw"><p>

<input type="button" value="登录" onclick="userCheck()" >

</form>

在上面的页面中，当用户输入用户名及密码信息，单击“登录”按钮后，将调用“userCheck()”函数，在该函数中将首先获取用户填写的信息，进行最基本的数据有效性检查，如果检查通过，将借助Ajax发送请求，并等待服务器端的响应，一旦接收到服务器端的响应数据，则通过LHttpReq.responseText返回对应的数据信息，然后显示在提示窗口中。

该Web应用的配置文件web.xml对应的代码如下所示。从该配置文件中可以了解到，当浏览器端提交“login”请求，服务器端类名为“classmate.LoginAction”的Servlet程序进行处理。

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.4"

xmlns="http://java.sun.com/xml/ns/j2ee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee

http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">



<servlet>

<servlet-name>ms1</servlet-name>

<servlet-class>classmate.LoginAction</servlet-class>

</servlet>



<servlet-mapping>

<servlet-name>ms1</servlet-name>

<url-pattern>/login</url-pattern>

</servlet-mapping>





<!-- The Welcome File List -->

<welcome-file-list>

<welcome-file>login.jsp</welcome-file>

</welcome-file-list>

</web-app>

下面关注一下服务器端Servlet程序LoginAction.java中对应的程序代码。当接收到浏览器端提交的请求后，Servlet程序将首先获取浏览器端提交的用户名及密码信息，然后进行身份验证，本例中为了关注Ajax，没有引入与数据库相关的操作。

package classmate;



import java.io.IOException;

……

public class LoginAction extends HttpServlet {



public void init(ServletConfig config) throws ServletException {

}



/*

* 处理<GET> 请求方法

*/

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

//设置接收信息的字符集

request.setCharacterEncoding("UTF-8");

//接收浏览器端提交的信息

String uname = request.getParameter("uname");

String psw = request.getParameter("psw");

//设置输出信息的格式及字符集

response.setContentType("text/xml; charset=UTF-8");

response.setHeader("Cache-Control", "no-cache");

//创建输出流对象

PrintWriter out = response.getWriter();

//依据验证结果输出不同的数据信息

if(uname.equals("jenny") && psw.equals("hi")){

out.println("热烈的欢迎您!");

}else{

out.println("对不起,登录失败！");

}

out.close();

}

}

如果验证通过，将返回“热烈的欢迎您！”的提示，如果验证失败，将显示“对不起，登录失败！”的信息，信息是以responseText的格式返回客户端的。


案例4-4 Ajax的请求处理

在Eclipse中新建一个项目，项目的名称为“P44_Request”。首先，新建一个HTML文档，页面名称为“login.jsp”。 本例中实现的效果与案例4-3相同，这里不再赘述，下面看一下具体的实现页面。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<head>

<META http-equiv=Content-Type content="text/html; charset=UTF-8">

</head>

<script language="javascript">

var XMLHttpReq = false;

var uname;

var psw;

//创建XMLHttpRequest对象

function createXMLHttpRequest() {

if(window.XMLHttpRequest) { //Mozilla 浏览器

XMLHttpReq = new XMLHttpRequest();

}

else if (window.ActiveXObject) { // IE浏览器

try {

XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {}

}

}

}

//发送请求函数

function sendRequest() {

createXMLHttpRequest();

XMLHttpReq.open("POST", "login", true);

XMLHttpReq.onreadystatechange = processResponse;//指定响应函数

XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

XMLHttpReq.send("uname=" + uname + "&psw=" + psw); // 发送请求

}

// 处理返回信息函数

function processResponse() {

if (XMLHttpReq.readyState == 4) { // 判断对象状态

if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息

var res=XMLHttpReq.responseXML.getElementsByTagName("res")[0].first Child.data;

window.alert(res);

} else { //页面不正常

window.alert("您所请求的页面有异常。");

}

}

}

// 身份验证函数

function userCheck() {

uname = document.myform.uname.value;

psw = document.myform.psw.value;

if(uname=="") {

window.alert("用户名不能为空。");

document.myform.uname.focus();

return false;

}

else {

sendRequest();

}

}



</script>



<body vLink="#006666" link="#003366" bgColor="#E0F0F8">

<img height="33" src="enter.gif" width="148">

<form action="" method="post" name="myform">

用户名： <input size="15" name="uname"><p>

密  码： <input type="password" size="15" name="psw"><p>

<input type="button" value="登录" onclick="userCheck()" >

</form>

可以看到，如果以POST方式提交请求，需要配合使用下面的代码完成正确的请求及参数的提交。

XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

XMLHttpReq.send("uname=" + uname + "&psw=" + psw);

其中第一条语句是为了确保服务器知道请求体中有请求参数，而最终是通过调用send()方法将串作为参数进行传递。服务器端的Servlet程序处理过程与前面的案例相同，不再赘述。
4.4.2 提交XML格式的请求参数
除了可以处理已经有的 XML文档之外，在Ajax技术中还可以在向服务器端提交请求时，将请求的参数作为XML的格式进行发送。即将XML文档作为请求体的一部分发送到服务器，在服务器端可以从请求体中读取XML，并加以处理。

下面我们继续对案例4-4中的login.jsp页面进行调整。调整后的页面代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<head>

<META http-equiv=Content-Type content="text/html; charset=UTF-8">

</head>

<script language="javascript">

var XMLHttpReq = false;

var uname;

var psw;

//创建XMLHttpRequest对象

function createXMLHttpRequest() {

if(window.XMLHttpRequest) { //Mozilla 浏览器

XMLHttpReq = new XMLHttpRequest();

}

else if (window.ActiveXObject) { // IE浏览器

try {

XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {}

}

}

}

//发送请求函数

function sendRequest() {

createXMLHttpRequest();

var xml = createXML();

window.alert(xml);

XMLHttpReq.open("POST", "login", true);

XMLHttpReq.onreadystatechange = processResponse;//指定响应函数

XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form- urlencoded");

XMLHttpReq.send(xml); // 发送请求

}

// 处理返回信息函数

function processResponse() {

if (XMLHttpReq.readyState == 4) { // 判断对象状态

if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息

var res=XMLHttpReq.responseText;

window.alert(res);

} else { //页面不正常

window.alert("您所请求的页面有异常。");

}

}

}

// 身份验证函数

function userCheck() {

uname = document.myform.uname.value;

psw = document.myform.psw.value;

if(uname=="") {

window.alert("用户名不能为空。");

document.myform.uname.focus();

return false;

}

else {

sendRequest();

}

}

//创建XML

function createXML() {

var xml = "<user>";

xml = xml + "<name>" +uname + "<\/name>";

xml = xml + "<psw>" + psw + "<\/psw>";

xml = xml + "<\/user>";

return xml;

}



</script>



<body vLink="#006666" link="#003366" bgColor="#E0F0F8">

<img height="33" src="enter.gif" width="148">

<form action="" method="post" name="myform">

用户名： <input size="15" name="uname"><p>

密  码： <input type="password" size="15" name="psw"><p>

<input type="button" value="登录" onclick="userCheck()" >

</form>

在上面的页面中，一旦开始调用函数进行请求的发送处理时，将会首先借助“createXML()”函数将获取到的用户名及密码信息封装成XML文档的格式。然后在采用POST方式将其作为参数提交过去。

下面介绍一下XML格式的数据提交到服务器端之后，如何解析的？对应的服务器端Servlet程序代码如下：

package classmate;

import java.io.BufferedReader;

……



import org.w3c.dom.Document;

import org.w3c.dom.NodeList;

import org.xml.sax.SAXException;





public class LoginXmlAction extends HttpServlet {



public void init(ServletConfig config) throws ServletException {

}



/*

* 处理<POST>请求方法

*/

protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

//设置接收信息的字符集

request.setCharacterEncoding("UTF-8");

//

StringBuffer bxml = new StringBuffer();

String line = null;

try {

BufferedReader reader = request.getReader();

while((line = reader.readLine()) != null) {

bxml.append(line);

}

}

catch(Exception e) {

System.out.println(e.toString());

}



String xml =bxml.toString();

Document xmlDoc = null;

try {

xmlDoc =

DocumentBuilderFactory.newInstance().newDocumentBuilder()

.parse(new ByteArrayInputStream(xml.getBytes()));

}

catch(ParserConfigurationException e) {

System.out.println(e);

}

catch(SAXException e) {

System.out.println( e);

}



String uname = xmlDoc.getElementsByTagName("name").item(0).getFirstChild().getNodeValue();

String psw = xmlDoc.getElementsByTagName("psw").item(0).getFirstChild().getNodeValue();

String responseText;

//依据验证结果输出不同的数据信息

if(uname.equals("jenny") && psw.equals("hi")){

responseText = "热烈的欢迎您!" ;

}else{

responseText = "对不起,登录失败！";

}

//设置输出信息的格式及字符集

response.setContentType("text/xml; charset=UTF-8");

response.setHeader("Cache-Control", "no-cache");

response.getWriter().print(responseText);



}

}

注意在Java程序中，为了实现对XML格式数据的解析，需要首先导入与其相关的类所在的包。然后借助DocumentBuilderFactory提供的相关方法进行解析。

首先，我们需要建立一个解析器工厂，利用这个工厂来获得一个具体的解析器对象：

DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();

当获得一个工厂对象后，使用它的静态方法newDocumentBuilder()方法可以获得一个DocumentBuilder对象，这个对象代表了具体的DOM解析器。

然后，我们就可以利用这个解析器来对XML文档进行解析了：

Document doc = db.parse("c:/xml/message.xml");

DocumentBuilder的parse()方法接受一个XML文档名作为输入参数，返回一个Document对象，这个Document对象就代表了一个XML文档的树模型。以后所有的对XML文档的操作，都与解析器无关，直接在这个Document对象上进行操作就可以了。而具体对Document操作的方法，就是由DOM所定义的。

从上面得到的Document对象开始，就可以开始按照DOM的方式进行解析。使用Document对象的getElementsByTagName()方法，可以得到一个NodeList对象，一个Node对象代表一个XML文档中一个标签元素，而NodeList对象，它所代表的是一个Node对象的列表。然后，可以使用NodeList对象的item()方法来得到列表中每一个Node对象。当一个Node对象被建立之后，保存在XML文档中的数据就被提取出来并封装在这个Node中。然后再使用getFirstChild()方法来获得对应标记下面的第一个子Node对象。依此类推就可以获取到对应的数据，开始使用了。


案例4-5 页面中拖拽效果的实现

可拖放DOM模式（Draggable DOM pattern）可以让用户在Web页面中对各个部分进行编辑，即只需要选中要移动的部分，将其拖拽到新的位置上，就可以重新安排整个页面的布局效果，下面介绍一下具体的实现方式。

在Eclipse中新建一个项目，项目的名称为“P45_DropDrag”。首先，新建一个HTML文档，页面名称为“main.html”。 该页面实现的效果如图4-6所示。当用户使用鼠标选中对应的方框时，就可以通过拖拽调整其在页面中的位置。


图4-6 拖拽效果

本例中所使用的HTML文档的源代码如下所示。注意在本页面中调用了一个开源框架中有关定位的JavaScript脚本文件，读者可以参考本书配套光盘中的源代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

<HEAD>

<title>Main</title>

<script language="javascript" src="dom-drag.js"></script>

<link rel="stylesheet" href="style.css">

</HEAD>

<body>

<form id="Form1" method="post" runat="server">

<div id="news_root" style="LEFT:20px; TOP:20px" class="root">

<div id="news_handle" class="handle">定制窗口<span style="TEXT-ALIGN: right"></span></div>

<div id="news" class="text">欢迎使用拖拽功能</div>

</div>

</form>

<script language="javascript">

// 初始化新闻面板的拖动效果

var news_handle = document.getElementById("news_handle");

var news_root = document.getElementById("news_root");

Drag.init(news_handle, news_root);

news.style.backgroundColor = "#ffff00";

news.style.cursor = "hand";

</script>

</body>

</HTML>

层叠样式表文件对应的代码如下：

.root

{

position:absolute;

height:150px; width:200px;

border:1px solid #333;

BACKGROUND-COLOR: #eee

}

.handle

{

margin:2px;

padding:2px;

width:194px;

color:white;

background-color:navy;

font-family:verdana, sans-serif;

font-size:12px;



}

.text

{

color:navy;

font-family:verdana, sans-serif;

font-size:12px;



}
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值