`
zengjinliang
  • 浏览: 306840 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

ajax遍历xml文档

阅读更多
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遍历xml文档的方法

    本文实例讲述了ajax遍历xml文档的方法。分享给大家供大家参考。具体分析如下: XMLHttpRequest对象提供了两个可以用来访问服务器响应的属性。第一个属性responseText将响应提供为一个串,第二个属性 responseXML将...

    Ajax读取xml数据类型例子

    然后调用`displayCities`函数,使用DOM方法遍历XML文档,获取`&lt;city&gt;`标签的`id`属性和文本内容,并将这些信息添加到页面的结果区域。 需要注意的是,由于浏览器的兼容性问题,这个示例可能无法在IE中正常工作。IE...

    Ajax 解析XML+json总结

    1. **获取XML数据**:当Ajax请求完成,可以通过`responseXML`属性获取到XML文档对象。 2. **DOM解析**:使用DOM(Document Object Model)接口,如`getElementsByTagName()`, `getAttribute()`, `childNodes`等方法...

    通过DOM和Ajax使用XML_从菜鸟到专家2006

    2. **DOM解析**:DOM解析器将XML文档转化为内存中的对象结构,开发者可以使用编程语言(如JavaScript、C#或Java)通过DOM API来查找、修改、添加和删除节点。理解DOM树的概念,掌握节点遍历和操作的方法,是使用DOM...

    读取xml生成树,ajax读取xml动态生成树(1)

    // 遍历XML树,创建HTML结构 var ul = document.createElement("ul"); createMenuNode(xmlDoc.documentElement, ul); document.getElementById("menuContainer").appendChild(ul); } function createMenuNode...

    Ajax读取XML文件实例

    现在,`xmlDoc`变量包含了XML文件的文档对象模型,我们可以遍历和操作XML节点。 6. 更新网页:有了解析后的XML数据,我们就可以根据需求在网页上显示或操作这些数据,而无需刷新整个页面。 例如,假设XML文件包含...

    Ajax_xml数据格式

    通过遍历这棵树,可以访问和修改XML文档的任何部分。例如,使用JavaScript的DOM方法可以找到XML中的特定元素、属性和文本: ```javascript var xmlDoc = xhr.responseXML; // xhr是XMLHttpRequest对象 var rootNode...

    AJAX获得XML节点的方法

    通过这种方式,JavaScript可以动态地遍历XML文档的节点,提取需要的信息,然后将其显示在网页上,实现无刷新的数据交互。例如,可以使用`getElementsByTagName`或`getAttributeNode`等方法来进一步筛选和获取特定的...

    ajax获取服务器以xml形式输出省市数据,并获取数据绑定前台下拉框和实现联动

    我们可以遍历XML节点,提取出省市信息,并填充到前端的下拉框中: ```javascript var provinces = xmlData.getElementsByTagName('province'); for (var i = 0; i ; i++) { var provinceName = provinces[i]....

    ajax文件xml格式

    - 首先获取XML文档的根元素。 - 然后使用`getFirstChild`函数找到`Version`标签。 - 接着获取所有`Item`标签,并遍历它们。 - 对于每一个`Item`,提取属性如`cmm_Resume`、`rowid`等,并将其插入到表格中。 #### 6....

    ajax中使用xml传递数据

    DOM解析器将整个XML文档加载到内存中,形成一棵树结构,适合小型XML文档;SAX是事件驱动的解析方式,适用于大文件;JAXB则用于对象与XML之间的映射,便于数据绑定。根据具体需求选择合适的解析方式。 5. **DWR中的...

    basic-ajax-loop:用于遍历 XML 文件的 Javascript 脚本的基本模型

    例如,`XMLHttpRequest.responseText` 属性会返回服务器响应的文本,我们可以通过创建 `DOMParser` 对象将文本转换为 XML 文档,然后使用 `getElementsByTagName`、`childNodes`、`nodeValue` 等方法遍历和获取元素...

    FireFox下用XML DOM解析XML文档(ASP.NET Web)

    2. **遍历XML文档**:利用DOM API,你可以通过`getElementsByTagName`, `getElementById`, `querySelector`, `querySelectorAll`等方法查找特定的元素。 ```javascript var elements = xmlDoc....

    网页读取xml文档并分页

    这通常涉及遍历XML节点并计算总数。 2. **获取当前页数据**:根据当前页码,确定应展示的XML节点范围,然后提取这些节点。 3. **展示数据**:将提取的XML节点转换为HTML元素,并插入到页面中。 4. **分页导航**:...

    ajax-xml-aspnet读存数据基础代码

    `System.Xml`库提供了丰富的API,如`XmlDocument`用于加载和操作XML文档,`XmlNode`和`XmlElement`用于遍历和修改XML树,`XmlNodeReader`则提供了一个读取XML流的高效方式。 **4. jQuery与Ajax的结合** `jq.js`中...

    ajax xml省市区三级联动

    4. **解析XML数据**:在AJAX的`success`回调函数中,使用jQuery的`parseXML()`方法将返回的XML字符串转换为XML文档对象,然后遍历`&lt;cities&gt;`节点,生成城市列表,并更新市的下拉列表。 5. **绑定市的事件**:同理,...

    使用Ajax解析xml实现省市县三级联动

    此外,代码中的`nodeType == 1`是为了检查节点是否为元素节点,因为XML文档中的元素节点对应于HTML中的标签。 总结,这个示例展示了如何利用Ajax和XML数据结构实现跨浏览器的省市县三级联动。它通过动态更新DOM元素...

Global site tag (gtag.js) - Google Analytics