ajax请求xml简单DEMO

最新推荐文章于 2025-07-14 20:11:55 发布

iteye_14486

最新推荐文章于 2025-07-14 20:11:55 发布

阅读量121

点赞数

CC 4.0 BY-SA版权

文章标签： XML Ajax JavaScript HTML Microsoft ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_14486/article/details/81897792

本文介绍了一个使用JavaScript进行XML数据解析的示例。通过发送GET请求获取XML文件，并根据不同条件展示北部城市或所有城市的列表。该示例展示了如何创建XMLHttpRequest对象、处理响应状态改变以及解析XML文档。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

response.xml:

<?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>

request.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <script type="text/javascript">
    var xmlHttp;
    var requestType;
    function createXMLHTTPRequest() 
    {
     	try{
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(e)
		{
			try{
				xmlHttp = new XMLHttpRequest();
			}
			catch(e)
			{
				xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
			}
		}
    }
   
    function startRequest(requestList)
    {
     	requestType=requestList;
    	createXMLHTTPRequest();
    	xmlHttp.onreadystatechange=handleStateChange;
     	xmlHttp.open("GET","response.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 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>
   <input type="button" value="View All " onclick="startRequest('all');" />
   <input type="button" value="View North " onclick="startRequest('north');" />
</body>
</html>