Ajax学习第一章--读取XML_自我学习

基础：首先要明白各浏览器获取XMLHttpRequest对象的差异

Firefox, Opera 8.0+, Safari： xmlHttp=new XMLHttpRequest();

IE:xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

其次要明白三行代码

xmlHttp.onreadystatechange = function(){ }

表示响应到达客户端该如何处理，只有在 xmlHttp.open("GET","jilian/ss.xml",true)第三个参数为true才能使用

xmlHttp.open("GET","jilian/ss.xml",true)

表示Ajax以get的方式向哪一个服务器组件发出请求，第三个参数代表是否使用异步请求true表示是

xmlHttp.send(null);

发送请求

	<script type="text/javascript">
	function change(str)
	{
	 var xmlHttp;
	 try
	    {
	   // Firefox, Opera 8.0+, Safari
	    xmlHttp=new XMLHttpRequest();
	    }
	 catch (e)
	    {
	
	  // Internet Explorer
	   try
	      {
	      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	      }
	   catch (e)
	      {
	
	      try
	         {
	         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	         }
	      catch (e)
	         {
	         alert("您的浏览器不支持AJAX！");
	         return false;
	         }
	      }
	    }
	 xmlHttp.onreadystatechange = function()
	 {
		if(xmlHttp.readyState == 4)
		{
			//取得该XML文件
			var xml = xmlHttp.responseXML;
			// 取得XML文档的根  
   		    var root = xml.documentElement; 
			//获取标签为sheng的节点
			var sheng = root.getElementsByTagName("sheng");
			var shi;
			var shiSelect="";
			
			for(var i = 0;i<sheng.length;i++)
			{
				//通过getAttribute获取节点的某个属性值
				if(str == sheng[i].getAttribute("value"))
				{
					shi = sheng[i].getElementsByTagName("shi");
					for(var j = 0;j<shi.length;j++)
					{
						//获取节点之间的内容
						shiSelect+="<option>"+shi[j].firstChild.nodeValue+"</option>";
					}
				}
			}
			document.getElementById("shi").innerHTML = shiSelect;
		} 
	 }
	 xmlHttp.open("GET","jilian/ss.xml",true)
	 xmlHttp.send(null);
	 
}
	</script>
  </head>
  
  <body>
   <select id="sheng" onchange="change(this.value)">
   <option>山东</option>
   <option>北京</option>
   </select>
   <select id="shi">
   </select>
  </body>

读取的XML文件为

<?xml version="1.0" encoding="UTF-8"?>
<shengs>
	<sheng value="山东">
		<shi value="青岛">青岛</shi>	
		<shi value="济南">济南</shi>
		<shi value="潍坊">潍坊</shi>
		<shi value="东营">东营</shi>
		<shi value="菏泽">菏泽</shi>
	</sheng>
	<sheng value="北京">
		<shi value="东城">东城</shi>	
		<shi value="西城">西城</shi>
		<shi value="朝阳">朝阳</shi>
	</sheng>	
</shengs>

在这里要注意Ajax读取XML的方式

Ajax学习第一章--读取XML_自我学习

猜你喜欢