ajax遍历xml文档的方法
程序员文章站
2022-06-14 15:18:43
本文实例讲述了ajax遍历xml文档的方法。分享给大家供大家参考。具体分析如下：
xmlhttprequest对象提供了两个可以用来访问服务器响应的属性。第一个属性res...
本文实例讲述了ajax遍历xml文档的方法。分享给大家供大家参考。具体分析如下：
xmlhttprequest对象提供了两个可以用来访问服务器响应的属性。第一个属性responsetext将响应提供为一个串，第二个属性 responsexml将响应提供为一个xml对象。一些简单的用例就很适合按简单文本来获取响应，如将响应显示在警告框中，或者响应只是指示成功还是失 败的词
前面<ajax小结>中的例子是从xmlhttprequest对象获取服务器响应，并使用xmlhttprequest对象的responsetext属性将响应获取为文本。
这次我们来使用xmlhttprequest对象的responsexml属性，将结果获取为xml文档.这样一来，我们就可以使用w3c dom方法来遍历xml文档。(前面文章或多或少讲过些dom,在此不重复)
ok,下面来看例子.
首先还是一段xml文档代码(parsexml.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如下：
<%@ 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程序设计有所帮助。