ajax解析xml并显示

最新推荐文章于 2025-07-10 13:44:21 发布

最新推荐文章于 2025-07-10 13:44:21 发布 · 138 阅读

文章标签：

#XML #Ajax #Microsoft #JSP #XHTML

AJAX 专栏收录该内容

3 篇文章

订阅专栏

本文提供了一个使用Ajax解析XML文件的示例代码。通过按钮触发请求获取XML数据，并根据不同条件展示北部地区或所有地区的城市列表。

以下分别为：parseXML.xml ,parseXML.jsp
<?xml version="1.0" encoding="UTF-8"?>
<states>
<north>
<state>北京</state>
<state>天津</state>
<state>大连</state>
</north>
<south>
<state>四川</state>
<state>湖北</state>
<state>广东</state>
</south>
<east>
<state>上海</state>
<state>徐州</state>
<state>青岛</state>
</east>
<west>
<state>西藏</state>
<state>新疆</state>
<state>甘肃</state>
</west>
</states>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ajax 解析xml数据</title>

<script type="text/javascript">
var xmlHttp;
var requestType = ""; //全局变量

function createXMLHttpRequest() { //创建xmlHttp核心对象
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}

function startRequest(requestedList) {//按钮触发事件
requestType = requestedList;
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange; //当改变状态时，调用回调函数
xmlHttp.open("GET", "parseXML.xml", true);
xmlHttp.send(null);
}

function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
if(requestType == "north") {
listNorthStates();
}
else if(requestType == "all") {
listAllStates();
}
}
}
}

function listNorthStates() {
var xmlDoc = xmlHttp.responseXML;//以XML形式接收
var northNode = xmlDoc.getElementsByTagName("north")[0];

var northStates = northNode.getElementsByTagName("state");

outputList("北方城市", northStates);
}

function listAllStates() {
var xmlDoc = xmlHttp.responseXML;//以XML形式接收
var allStates = xmlDoc.getElementsByTagName("state");

outputList("所有城市", allStates);
}

function outputList(title, states) {
var out = title;
var currentState = null;
for(var i = 0; i < states.length; i++) {
currentState = states[i];
out = out + "\n- " + currentState.childNodes[0].nodeValue;
}
// document.getElementById("show").innerHTML=xmlHttp.responseText;
alert(out);
}
</script>
</head>

<body>
<h1> 城市列表</h1>
<br/><br/>
<form action="#">
<input type="button" value="查看所有" onclick="startRequest('all');"/>
<br/><br/>
<input type="button" value="查看北部地区的数据" onclick="startRequest('north');"/>
<div id="show"></div>
</form>
</body>
</html>