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