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 1121JS方法: <html> <head> ... -
xml
2008-12-18 13:11 988<body><div id=x> ... -
JavaScript遍历XML
2008-12-18 12:57 1953<script language="Java ... -
一dwr例子
2008-09-02 21:27 1124HelloTest.java: package com. ... -
Google发布AJAX框架 Google Web Toolkit
2006-05-30 00:51 1182Google Web Toolkit是一个开放版本的AJAX ... -
Ajax框架汇总
2006-07-08 16:49 906原始出处: 1 Bindows (from 2003) ... -
AJAX框架之Bindows
2006-07-09 15:38 1035创建日期:2004年7月8日 作 者:Ilan Zisser ... -
调查一下大家在用的AJAX框架
2006-10-28 03:32 952调查一下大家在用的AJAX框架,根据投票结果会整理一些相关的讨 ... -
Dojo推出0.4.0
2006-10-31 15:42 867今天在坛子里,看到有朋友用到了Dojo 0.4.0,遂上Doj ... -
JavaScript编程规范(Javascript Programming Conventions)
2006-12-16 04:24 986在dojo上看到一篇有关JavaScript编程规则的文章,供 ... -
JsEasy简介
2007-02-19 03:34 943JsEasy简介 JsEasy是什么? JsEa ... -
WediaAjax诚挚邀请大家一起帮忙写Demo
2007-03-24 07:45 847大家好,发这篇文章的目的是希望能认识到更多的朋友,并帮助我一起 ... -
Dojo 0.4.2发布
2007-04-04 15:40 934在3月20日,Dojo发布了 0.4.2版本,这是对Dojo ... -
Dojo做的站点
2007-04-12 03:09 10141,TitlePane 首页点击“折叠评论”后,弹出详细内容 ... -
Ajax DWR 框架 util.js 文件学习整理
2007-04-23 09:36 1317Ajax DWR 框架 util.js 文件学习整理 util ... -
Brocade: visita效果的Ajax演示程序
2007-04-25 12:37 961visita效果的Ajax演示程序,支持firefox1.0、 ... -
桌面论坛“百工”Alpha1.0 和 桌面 Blog 版开始公测
2007-04-25 13:39 861由“百工”工作室强力打造的桌面Blog和桌面论坛,现在开始公测 ... -
WediaAjax Pro1.0 has been published as an open source project
2007-05-07 13:01 885Hi everyone, WediaAjax is a sma ... -
JSI2Alpha及JSA1beta 发布
2007-06-29 04:55 853原文见:
相关推荐
本文实例讲述了ajax遍历xml文档的方法。分享给大家供大家参考。具体分析如下: XMLHttpRequest对象提供了两个可以用来访问服务器响应的属性。第一个属性responseText将响应提供为一个串,第二个属性 responseXML将...
一个实现ajax功能的JS xml读取封装类代码,在这个JavaScript类里面,有核心的读取XML文件的代码,同时还包括了新建XML文档对象、在IE下使用ActiveX来创建,异步读取XML文件,创建XMLHttp对象,以备XML文档对象无法...
用ajax函数读取xml,然后解析XML.html,ajax无刷新读取文件,先使用jQuery加载XML,然后建立一个代码片段,遍历所有student节点,获取id节点,获取节点文本,获取student下的email属性,构造HTML字符串,通过append...
摘要:脚本资源,Ajax/JavaScript,ajax无刷新读取文件 用ajax函数读取xml,然后解析XML.html,ajax无刷新读取文件,先使用jQuery加载XML,然后建立一个代码片段,遍历所有student节点,获取id节点,获取节点文本,获取...
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 API 中文 JQquery凭借简洁的语法和跨平台的兼容性, 极大的简化了javascript开发人员遍历HTML文档,操作DOM,处理事件,执行动画和开发AJAX(javascript + xml + json ), 其理念:write less,do more
12.8.2 如何使用XML DOM--一个利用XML实现多级关联下拉选择框的例子 12.9 总结 第13章 事件处理 13.1 什么是事件 13.1.1 消息与事件响应 13.1.2 浏览器的事件驱动机制 13.2 基本事件处理 ...
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开发需要注意的...
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开发需要注意的...
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...
get实现异步获取xml文档数据 $.get发送请求 $.post发送请求 serialize()序列化表单 $.ajax()方法发送请求 第7章 validate验证插件 form表单插件 cookie插件 autocomplete插件 notesforlightbox插件 ...
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 限定事件...
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 ...
• 6.8.htm 数组元素遍历之二 • 6.9.htm 用构造函数来创建数组 • 6.10.htm 用构造函数来创建数组之二 • 6.11.htm join方法 • 6.12.htm revrse方法 • 6.13....
• sample07.htm 在同一个HTML文档中多次引用外部脚本文件 • sample08.htm 使用外部脚本文件和嵌入的JavaScript代码 • sample09.htm 边加载边解析的JavaScript代码 • sample10....
15.3 文档结构和遍历 15.4 属性 15.5 元素的内容 15.6 创建、插入和删除节点 15.7 例子:生成目录表 15.8 文档和元素的几何形状和滚动 15.9 HTML表单 15.10 其他文档特性 第16章 脚本化CSS 16.1 CSS概览 16.2 重要的...