XMLHttpRequest对象提供了两个可以用来访问服务器响应的属性。第一个属性responseText将响应提供为一个串,第二个属性responseXML将响应提供为一个XML对象。一些简单的用例就很适合按简单文本来获取响应,如将响应显示在警告框中,或者响应只是指示成功还是失败的词
前面<ajax小结>中的例子是从XMLHttpRequest对象获取服务器响应,并使用XMLHttpRequest对象的responseText属性将响应获取为文本。
这次我们来使用XMLHttpRequest对象的responseXML属性,将结果获取为XML文档.这样一来,我们就可以使用W3C DOM方法来遍历XML文档。(前面文章或多或少讲过些DOM,在此不重复)
OK,下面来看例子.
首先还是一段XML文档代码(parseXML.xml)如下:
<?xml version="1.0" encoding="UTF-8"?>
<states>
<north>
<state>Minnesota</state>
<state>Iowa</state>
<state>North Dakota</state>
</north>
<south>
<state>Texas</state>
<state>Oklahoma</state>
<state>Louisiana</state>
</south>
<east>
<state>New York</state>
<state>North Carolina</state>
<state>Massachusetts</state>
</east>
<west>
<state>California</state>
<state>Oregon</state>
<state>Nevada</state>
</west>
</states>
然后建立一个MyJsp.jsp,用来遍历XML文档,代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'MyJsp.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<script type="text/javascript">
var flg=false;
var requestType = "";
//得到XMLHttpRequest对象
function newXMLHttpRequest() {
var xmlreq = false;
if (window.XMLHttpRequest) {
xmlreq = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {}
}
}
return xmlreq;
}
function startRequest(requestedList){
requestType=requestedList;
flg=newXMLHttpRequest();
//当XMLHttpRequest对象在请求过程中间状态改变的时候
//回来调用handleStateChange方法
flg.onreadystatechange = handleStateChange;
flg.open("GET", "parseXML.xml", true);
flg.send(null);
}
//处理函数
function handleStateChange(){
if(flg.readyState==4){
if(flg.status==200){
if(requestType=="north"){
listNorthStates();
}else if(requestType=="all"){
listAllStates();
}if(requestType=="south"){
listSouthStates();
}
}
}
}
//用于显示NorthStates方法
function listNorthStates(){
var xmlDoc=flg.responseXML;
var northNode=xmlDoc.getElementsByTagName("north")[0];
var northStates=northNode.getElementsByTagName("state");
outputList("North States",northStates);
}
//用于显示SouthStates方法
function listSouthStates(){
var xmlDoc=flg.responseXML;
var SouthNode=xmlDoc.getElementsByTagName("south")[0];
var SouthStates=SouthNode.getElementsByTagName("state");
outputList("South States",SouthStates);
}
//用于显示AllStates方法
function listAllStates(){
var xmlDoc=flg.responseXML;
var allStates=xmlDoc.getElementsByTagName("state");
outputList("All States in Document", allStates);
}
//输出元素并显示于提示框中
function outputList(title,states){
var out=title;
var currState=null;
for(var i=0;i<states.length;i++){
currState=states;
out=out+"\n-"+currState.childNodes[0].nodeValue;
}
alert(out);
}
</script>
<body>
<form action="#">
<input type="button" value="View All Listed States"
onclick="startRequest('all');"/><br>
<input type="button" value="View All Listed Northern States"
onclick="startRequest('north');"/><br>
<input type="button" value="View All Listed Southern States"
onclick="startRequest('south');"/>
</form>
</body>
</html>
前面<ajax小结>中的例子是从XMLHttpRequest对象获取服务器响应,并使用XMLHttpRequest对象的responseText属性将响应获取为文本。
这次我们来使用XMLHttpRequest对象的responseXML属性,将结果获取为XML文档.这样一来,我们就可以使用W3C DOM方法来遍历XML文档。(前面文章或多或少讲过些DOM,在此不重复)
OK,下面来看例子.
首先还是一段XML文档代码(parseXML.xml)如下:
<?xml version="1.0" encoding="UTF-8"?>
<states>
<north>
<state>Minnesota</state>
<state>Iowa</state>
<state>North Dakota</state>
</north>
<south>
<state>Texas</state>
<state>Oklahoma</state>
<state>Louisiana</state>
</south>
<east>
<state>New York</state>
<state>North Carolina</state>
<state>Massachusetts</state>
</east>
<west>
<state>California</state>
<state>Oregon</state>
<state>Nevada</state>
</west>
</states>
然后建立一个MyJsp.jsp,用来遍历XML文档,代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'MyJsp.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<script type="text/javascript">
var flg=false;
var requestType = "";
//得到XMLHttpRequest对象
function newXMLHttpRequest() {
var xmlreq = false;
if (window.XMLHttpRequest) {
xmlreq = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {}
}
}
return xmlreq;
}
function startRequest(requestedList){
requestType=requestedList;
flg=newXMLHttpRequest();
//当XMLHttpRequest对象在请求过程中间状态改变的时候
//回来调用handleStateChange方法
flg.onreadystatechange = handleStateChange;
flg.open("GET", "parseXML.xml", true);
flg.send(null);
}
//处理函数
function handleStateChange(){
if(flg.readyState==4){
if(flg.status==200){
if(requestType=="north"){
listNorthStates();
}else if(requestType=="all"){
listAllStates();
}if(requestType=="south"){
listSouthStates();
}
}
}
}
//用于显示NorthStates方法
function listNorthStates(){
var xmlDoc=flg.responseXML;
var northNode=xmlDoc.getElementsByTagName("north")[0];
var northStates=northNode.getElementsByTagName("state");
outputList("North States",northStates);
}
//用于显示SouthStates方法
function listSouthStates(){
var xmlDoc=flg.responseXML;
var SouthNode=xmlDoc.getElementsByTagName("south")[0];
var SouthStates=SouthNode.getElementsByTagName("state");
outputList("South States",SouthStates);
}
//用于显示AllStates方法
function listAllStates(){
var xmlDoc=flg.responseXML;
var allStates=xmlDoc.getElementsByTagName("state");
outputList("All States in Document", allStates);
}
//输出元素并显示于提示框中
function outputList(title,states){
var out=title;
var currState=null;
for(var i=0;i<states.length;i++){
currState=states;
out=out+"\n-"+currState.childNodes[0].nodeValue;
}
alert(out);
}
</script>
<body>
<form action="#">
<input type="button" value="View All Listed States"
onclick="startRequest('all');"/><br>
<input type="button" value="View All Listed Northern States"
onclick="startRequest('north');"/><br>
<input type="button" value="View All Listed Southern States"
onclick="startRequest('south');"/>
</form>
</body>
</html>
发表评论
-
没事写个JSON
2010-04-02 10:28 1147JS方法: <html> <head> ... -
xml
2008-12-18 13:11 1014<body><div id=x> ... -
JavaScript遍历XML
2008-12-18 12:57 1972<script language="Java ... -
一dwr例子
2008-09-02 21:27 1144HelloTest.java: package com. ... -
Google发布AJAX框架 Google Web Toolkit
2006-05-30 00:51 1205Google Web Toolkit是一个开放版本的AJAX ... -
Ajax框架汇总
2006-07-08 16:49 928原始出处: 1 Bindows (from 2003) ... -
AJAX框架之Bindows
2006-07-09 15:38 1055创建日期:2004年7月8日 作 者:Ilan Zisser ... -
调查一下大家在用的AJAX框架
2006-10-28 03:32 979调查一下大家在用的AJAX框架,根据投票结果会整理一些相关的讨 ... -
Dojo推出0.4.0
2006-10-31 15:42 883今天在坛子里,看到有朋友用到了Dojo 0.4.0,遂上Doj ... -
JavaScript编程规范(Javascript Programming Conventions)
2006-12-16 04:24 1020在dojo上看到一篇有关JavaScript编程规则的文章,供 ... -
JsEasy简介
2007-02-19 03:34 974JsEasy简介 JsEasy是什么? JsEa ... -
WediaAjax诚挚邀请大家一起帮忙写Demo
2007-03-24 07:45 875大家好,发这篇文章的目的是希望能认识到更多的朋友,并帮助我一起 ... -
Dojo 0.4.2发布
2007-04-04 15:40 962在3月20日,Dojo发布了 0.4.2版本,这是对Dojo ... -
Dojo做的站点
2007-04-12 03:09 10371,TitlePane 首页点击“折叠评论”后,弹出详细内容 ... -
Ajax DWR 框架 util.js 文件学习整理
2007-04-23 09:36 1346Ajax DWR 框架 util.js 文件学习整理 util ... -
Brocade: visita效果的Ajax演示程序
2007-04-25 12:37 984visita效果的Ajax演示程序,支持firefox1.0、 ... -
桌面论坛“百工”Alpha1.0 和 桌面 Blog 版开始公测
2007-04-25 13:39 884由“百工”工作室强力打造的桌面Blog和桌面论坛,现在开始公测 ... -
WediaAjax Pro1.0 has been published as an open source project
2007-05-07 13:01 913Hi everyone, WediaAjax is a sma ... -
JSI2Alpha及JSA1beta 发布
2007-06-29 04:55 888原文见:
相关推荐
本文实例讲述了ajax遍历xml文档的方法。分享给大家供大家参考。具体分析如下: XMLHttpRequest对象提供了两个可以用来访问服务器响应的属性。第一个属性responseText将响应提供为一个串,第二个属性 responseXML将...
然后调用`displayCities`函数,使用DOM方法遍历XML文档,获取`<city>`标签的`id`属性和文本内容,并将这些信息添加到页面的结果区域。 需要注意的是,由于浏览器的兼容性问题,这个示例可能无法在IE中正常工作。IE...
1. **获取XML数据**:当Ajax请求完成,可以通过`responseXML`属性获取到XML文档对象。 2. **DOM解析**:使用DOM(Document Object Model)接口,如`getElementsByTagName()`, `getAttribute()`, `childNodes`等方法...
2. **DOM解析**:DOM解析器将XML文档转化为内存中的对象结构,开发者可以使用编程语言(如JavaScript、C#或Java)通过DOM API来查找、修改、添加和删除节点。理解DOM树的概念,掌握节点遍历和操作的方法,是使用DOM...
// 遍历XML树,创建HTML结构 var ul = document.createElement("ul"); createMenuNode(xmlDoc.documentElement, ul); document.getElementById("menuContainer").appendChild(ul); } function createMenuNode...
现在,`xmlDoc`变量包含了XML文件的文档对象模型,我们可以遍历和操作XML节点。 6. 更新网页:有了解析后的XML数据,我们就可以根据需求在网页上显示或操作这些数据,而无需刷新整个页面。 例如,假设XML文件包含...
通过遍历这棵树,可以访问和修改XML文档的任何部分。例如,使用JavaScript的DOM方法可以找到XML中的特定元素、属性和文本: ```javascript var xmlDoc = xhr.responseXML; // xhr是XMLHttpRequest对象 var rootNode...
通过这种方式,JavaScript可以动态地遍历XML文档的节点,提取需要的信息,然后将其显示在网页上,实现无刷新的数据交互。例如,可以使用`getElementsByTagName`或`getAttributeNode`等方法来进一步筛选和获取特定的...
我们可以遍历XML节点,提取出省市信息,并填充到前端的下拉框中: ```javascript var provinces = xmlData.getElementsByTagName('province'); for (var i = 0; i ; i++) { var provinceName = provinces[i]....
- 首先获取XML文档的根元素。 - 然后使用`getFirstChild`函数找到`Version`标签。 - 接着获取所有`Item`标签,并遍历它们。 - 对于每一个`Item`,提取属性如`cmm_Resume`、`rowid`等,并将其插入到表格中。 #### 6....
DOM解析器将整个XML文档加载到内存中,形成一棵树结构,适合小型XML文档;SAX是事件驱动的解析方式,适用于大文件;JAXB则用于对象与XML之间的映射,便于数据绑定。根据具体需求选择合适的解析方式。 5. **DWR中的...
例如,`XMLHttpRequest.responseText` 属性会返回服务器响应的文本,我们可以通过创建 `DOMParser` 对象将文本转换为 XML 文档,然后使用 `getElementsByTagName`、`childNodes`、`nodeValue` 等方法遍历和获取元素...
2. **遍历XML文档**:利用DOM API,你可以通过`getElementsByTagName`, `getElementById`, `querySelector`, `querySelectorAll`等方法查找特定的元素。 ```javascript var elements = xmlDoc....
这通常涉及遍历XML节点并计算总数。 2. **获取当前页数据**:根据当前页码,确定应展示的XML节点范围,然后提取这些节点。 3. **展示数据**:将提取的XML节点转换为HTML元素,并插入到页面中。 4. **分页导航**:...
`System.Xml`库提供了丰富的API,如`XmlDocument`用于加载和操作XML文档,`XmlNode`和`XmlElement`用于遍历和修改XML树,`XmlNodeReader`则提供了一个读取XML流的高效方式。 **4. jQuery与Ajax的结合** `jq.js`中...
4. **解析XML数据**:在AJAX的`success`回调函数中,使用jQuery的`parseXML()`方法将返回的XML字符串转换为XML文档对象,然后遍历`<cities>`节点,生成城市列表,并更新市的下拉列表。 5. **绑定市的事件**:同理,...
此外,代码中的`nodeType == 1`是为了检查节点是否为元素节点,因为XML文档中的元素节点对应于HTML中的标签。 总结,这个示例展示了如何利用Ajax和XML数据结构实现跨浏览器的省市县三级联动。它通过动态更新DOM元素...