`
zengjinliang
  • 浏览: 302360 次
  • 性别: 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功能的JS xml读取封装类代码.rar

    一个实现ajax功能的JS xml读取封装类代码,在这个JavaScript类里面,有核心的读取XML文件的代码,同时还包括了新建XML文档对象、在IE下使用ActiveX来创建,异步读取XML文件,创建XMLHttp对象,以备XML文档对象无法...

    用ajax函数读取xml,然后解析XML.html.rar

    用ajax函数读取xml,然后解析XML.html,ajax无刷新读取文件,先使用jQuery加载XML,然后建立一个代码片段,遍历所有student节点,获取id节点,获取节点文本,获取student下的email属性,构造HTML字符串,通过append...

    用ajax函数读取xml,然后解析XML.html

    摘要:脚本资源,Ajax/JavaScript,ajax无刷新读取文件 用ajax函数读取xml,然后解析XML.html,ajax无刷新读取文件,先使用jQuery加载XML,然后建立一个代码片段,遍历所有student节点,获取id节点,获取节点文本,获取...

    【卷一/共两卷】AJAX实战pdf高清版90M

    9.4.1 遍历XML文档 9.4.2 应用CSS 9.5 高级问题 9.5.1 允许多选择查询 9.5.2 将双组合扩展为三组合 9.6 重构 9.6.1 新的和改进过的net.ContentLoader 9.6.2 创建双组合组件 9.7 小结 第10章 输入前提示 10.1 考察...

    jquery3.1.chm 中文 API

    jquery3.1 API 中文 JQquery凭借简洁的语法和跨平台的兼容性, 极大的简化了javascript开发人员遍历HTML文档,操作DOM,处理事件,执行动画和开发AJAX(javascript + xml + json ), 其理念:write less,do more

    JavaScript王者归来part.1 总数2

     12.8.2 如何使用XML DOM--一个利用XML实现多级关联下拉选择框的例子   12.9 总结   第13章 事件处理  13.1 什么是事件   13.1.1 消息与事件响应   13.1.2 浏览器的事件驱动机制   13.2 基本事件处理  ...

    PHP入门到精通

    22.5动态创建XML文档 PHP与LDAP技术(教学录像:25分27秒) 23.1LDAP简介 23.2LDAP服务器的安装与配置 23.3PHP与LDAP PHP与Ajax技术(教学录像:32分47秒) 24.1了解AJAX 24.2AJAX使用的技术 24.3Ajax开发需要注意的...

    PHP入门到精通02

    22.5动态创建XML文档 PHP与LDAP技术(教学录像:25分27秒) 23.1LDAP简介 23.2LDAP服务器的安装与配置 23.3PHP与LDAP PHP与Ajax技术(教学录像:32分47秒) 24.1了解AJAX 24.2AJAX使用的技术 24.3Ajax开发需要注意的...

    ZendFramework中文文档

    5.4. Zend_Config_Xml 6. Zend_Console_Getopt 6.1. Getopt 简介 6.2. 声明 Getopt 规则 6.2.1. 用短语法声明选项 6.2.2. 用长语法声明选项 6.3. 读取(Fetching)选项和参数 6.3.1. 操作 Getopt 异常 6.3.2...

    JQuery权威指南源代码

    get实现异步获取xml文档数据 $.get发送请求 $.post发送请求 serialize()序列化表单 $.ajax()方法发送请求 第7章 validate验证插件 form表单插件 cookie插件 autocomplete插件 notesforlightbox插件 ...

    jquery基础教程高清版PDF.part5.rar

     6.1.3 加载XML 文档   6.2 选择数据格式   6.3 向服务器传递数据   6.3.1 执行GET请求   6.3.2 执行POST请求   6.3.3 序列化表单   6.4 关注请求   6.5 AJAX和事件   6.5.1 限定事件...

    Jqury基础教程

    6.1.3 加载XML文档 6.2 选择数据格式 6.3 向服务器传递数据 6.3.1 执行GET请求 6.3.2 执行POST请求 6.3.3 序列化表单 6.4 关注请求 6.5 AJAX和事件 6.6 安全限制 6.7 其他工具 6.7.1 低级AJAX方法 6.7.2 ...

    精通JavaScript

    • 6.8.htm 数组元素遍历之二 • 6.9.htm 用构造函数来创建数组 • 6.10.htm 用构造函数来创建数组之二 • 6.11.htm join方法 • 6.12.htm revrse方法 • 6.13....

    《javaScrip开发技术大全》源代码

    • sample07.htm 在同一个HTML文档中多次引用外部脚本文件 • sample08.htm 使用外部脚本文件和嵌入的JavaScript代码 • sample09.htm 边加载边解析的JavaScript代码 • sample10....

    JavaScript权威指南(第六版) 清晰-完整

    15.3 文档结构和遍历 15.4 属性 15.5 元素的内容 15.6 创建、插入和删除节点 15.7 例子:生成目录表 15.8 文档和元素的几何形状和滚动 15.9 HTML表单 15.10 其他文档特性 第16章 脚本化CSS 16.1 CSS概览 16.2 重要的...

Global site tag (gtag.js) - Google Analytics