ajax实战篇---城市select联动----XML交互

时间 2021-08-13

标签 javascript php css html java node ajax 浏览器缓存服务器栏目 Ajax 繁體版

原文原文链接

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  
    <title>城市联动效果</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">
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript">
	<!--
	
	
		//第一步---------------------建立ajax引擎  
    function getXmlHttpObject(){  
          
        var xmlHttpRequest;  
        //不一样的浏览器获取对象xmlhttprequest 对象方法不同  
        if(window.ActiveXObject){  
              
            xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");//这个是ie内核  
              
        }else{  
  
            xmlHttpRequest=new XMLHttpRequest();//非ie内核  
        }  
  
        return xmlHttpRequest;//将建立建立的ajax引擎实例化  
  
    }  
  
    var myXmlHttpRequest="";//设置全局变量 为了后面的chuli 函数须要取得属性  


    	//第二步---------------------获取数据并发送服务器 
	function sendRequest(){
		 myXmlHttpRequest=getXmlHttpObject();//从实例化的模型里面的方法函数   

		if(myXmlHttpRequest){
			var url="./CityList.php";//url 属性 选择提交的地址  
            var data="provice="+$('sheng').value;//数据 id为sheng的数据取得数据  
            myXmlHttpRequest.open("post",url,true);//这里选择提交的方式post  异步操做
            myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//打开请求.  
  
            //指定为了第四步处理作准备回调函数.chuli是函数名  
            myXmlHttpRequest.onreadystatechange=chuli;  
            //第二部--------------------------发送数据到服务器端  
            myXmlHttpRequest.send(data);  
		}
		
		
	}
	
	//第四步------------------------------------------------对返回的数据进行处理处理函数
	function chuli(){
		
		//成功返回
		if(myXmlHttpRequest.readyState==4){
			
			if(myXmlHttpRequest.status==200){

            var cities=myXmlHttpRequest.responseXML.getElementsByTagName("city");//这里获取xml的标签 切记注意大小写  
  
           	$('city').length=0;
	            for(var i=0;i<cities.length;i++){
	            	  var city_val=cities[i].childNodes[0].nodeValue;  
	  				//建立optiion 
	  				
	  				var myOption=document.createElement("option");
	  				myOption.value=city_val;
	  				myOption.innerText=city_val;
	  				$('city').appendChild(myOption);

	           

	            }
          
				
			}
			
		}
	}
	
	  function $(id){  
        return document.getElementById(id);  
    }  
	-->
	
	</script>

  </head>
  
  <body>
    <select id="sheng" οnchange="sendRequest();">
    <option value="">---省---</option>
    <option value="zhejiang">浙江</option>
    <option value="jiangsu" >江苏</option>
    </select>
    <select id="city">
    <option value="">--城市--</option>
    </select>
    
     <select id="county">
    <option value="">--县城--</option>
    </select>
  </body>
</html>

<?php
	
	//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
	header("Content-Type: text/xml;charset=utf-8");
	//告诉浏览器不要缓存数据
	header("Cache-Control: no-cache");
	//获取用户提交城市名
	$province=$_POST['provice'];
	
	//第三步-------------------------------------准备返回xml格式的结果..
		$result="";
		if($province=="zhejiang"){
			
			$result="<states><city>绍兴</city><city>杭州</city><city>温州</city><city>义乌</city></states>";
			
		}else if($province=="jiangsu"){
			
			$result="<states><city>南京</city><city>盐城</city><city>苏州</city></states>";
		}
		
		echo $result;
	
?>