使用XMLHttpRequest处理server端返回的xml

最新推荐文章于 2022-11-10 23:32:19 发布

原创最新推荐文章于 2022-11-10 23:32:19 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#XML #Ajax #JavaScript #HTML #Microsoft #ViewUI

web前端专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个使用Ajax从XML文件中获取并解析数据的示例。通过JavaScript实现了发送请求、处理响应状态及根据不同条件显示不同区域的状态列表。

这个例子是《Ajax基础教程》上的例子，写在这里是为了督促自己要加快学习Ajax的进度。

parseXML.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Parse xml response</title>
		
		<script type="text/javascript">
			var xmlHttp;
			var requestType = "";
			
			function createXMLHttpRequest(){
				if(window.ActivXObject){
					xmlHttp = new ActivXObject("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;
				var northNode = xmlDoc.getElementsByTagName("north")[0];
				
				var out = "Northern States";
				var northStates = northNode.getElementsByTagName("state");
				
				outputList("Northern States",northStates);
			}
			
			function listAllStates(){
				var xmlDoc = xmlHttp.responseXML;
				var allStates = xmlDoc.getElementsByTagName("state");
				
				outputList("All States",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;
				}
				
				alert(out);
			}
		
		</script>
		
	</head>
	<body>
		<form action="#">
			<input type="button" value="View All Listed States" onclick="startRequest('all')"/>
			<br/><br/>
			<input type="button" value="View All Listed Northern States" onclick="startRequest('north')"/>
		</form>
		
	</body>
</html>

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>