ajax級聯

學習的

Request.js

var net = new Object();
//全局變量net
//構造函數
net.AjaxRequest=function (url,onload,onerror,method,params){
	//alert("Ajax:"+url);
	this.req=null;
	this.οnlοad=onload;
	this.οnerrοr=(onerror)?onerror:this.defaultError;
	this.loadDate(url,method,params);
}
net.AjaxRequest.prototype.loadDate=function(url,method,params){
	if(!method){method="GET";}
	if(window.XMLHttpRequest) {
		//針對FireFox，Mozillar，Opera，Safari，IE7，IE8
		// 非IE瀏覽器
        this.req = new XMLHttpRequest();	                      //創建XMLHttpRequest對象
    } else if(window.ActiveXObject) {
    	  //針對IE6，IE5.5，IE5
    	// IE瀏覽器      
        	this.req = new ActiveXObject("Microsoft.XMLHTTP");	
        	//創建XMLHttpRequest對象      
        	
        }
    if (this.req) {
       try{
    	   var loader=this;
    	   this.req.onreadystatechange=function(){
    	   net.AjaxRequest.onReadyState.call(loader);
    	   }
    	   this.req.open(method, url, true);
    	   if(method=="POST"){
    		   this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    	   }
    	   this.req.send(params);
       }catch(err){
    	   this.onerror.call(this);
       }
    }
}
net.AjaxRequest.onReadyState=function(){
	var req=this.req;
	var ready=req.readyState;
	if(ready==4){
		if(req.status==200){
			this.onload.call(this);
		}else {
			this.onerror.call(this);
		}
	}
}
net.AjaxRequest.prototype.defaultError=function(){
	alert("錯誤數據\n\n回調狀態:"+this.req.readyState+"\n狀態:"+this.req.status);
}

ajax.js

function getProvince(){
	var loader;
	//alert("loader;");
	loader=new net.AjaxRequest("../Area?action=getProvince&nocache="+new Date().getTime(),deal_getProvince,onerror,"GET");
 }
function deal_getProvince(){
	areaArr=this.req.responseText.split(",");
	//alert("areaArr");	
	for(i=0;i<areaArr.length;i++){
		document.getElementById("province").options[i]=new Option(areaArr[i],areaArr[i]);
	}
	if(areaArr[0]!=""){		
		getCity(areaArr[0]);
		//getCity(document.getElementById("province").options[0].value);
		//alert("areaArr");
	}
}


function getCity(province){
	var loader;
	loader=new net.AjaxRequest("../Area?action=getCity&province="+encodeURIComponent(province)+"&nocache="+new Date().getTime(),deal_getCity,onerror,"GET");
 }
function deal_getCity(){
	areaArr=this.req.responseText.split(",");
	document.getElementById("city").length=0;
        //$('#city').empty();
        document.getElementById("city").options[0]=new Option("請選擇","請選擇");
	for(i=1;i<areaArr.length+1;i++){
		document.getElementById("city").options[i]=new Option(areaArr[i-1],areaArr[i-1]);
	}
	getCountry(document.getElementById("city").options[0].value);
	//if(areaArr[0]!=""){		
		//getCountry(areaArr[0]);
		//alert(areaArr[0]);
	//}
}

function getCountry(city){
	//alert("getPerson(area)");
	var p=document.getElementById("province");
	var loader=new net.AjaxRequest("../Area?action=getCountry&province="+encodeURIComponent(p.value)+"&city="+encodeURIComponent(city)+"&nocache="+new Date().getTime(),deal_getCountry,onerror,"GET");
	
}

function deal_getCountry(){	
	areaArr=this.req.responseText.split(",");
	//alert(this.req.responseText);
	document.getElementById("country1").length=0;
	//if(areaArr[0].equals("請選擇"))	
	document.getElementById("country1").options[0]=new Option("請選擇","請選擇");
	for(i1=1;i1<areaArr.length+1;i1++){
		document.getElementById("country1").options[i1]=new Option(areaArr[i1-1],areaArr[i1-1]);
	}
}
function onerror(){}

index.jsp

<script src="js/AjaxRequest.js"></script>
	<script src="js/ajax.js"></script>
	<script type="text/javascript">
    window.οnlοad= function(){       
    getProvince();
    }
    </script >

<select name="province" id="province" οnchange="getCity(this.value)"></select>
								
<select name="city" id="city" οnchange="getCountry(this.value)"></select>
								
<select name="country1" id="country1"></select>