学习的
Request.js
var net = new Object(); //全局变量net //构造函数 net.AjaxRequest=function (url,onload,onerror,method,params){ //alert("Ajax:"+url); this.req=null; this.onload=onload; this.onerror=(onerror)?onerror:this.defaultError; this.loadDate(url,params); } net.AjaxRequest.prototype.loadDate=function(url,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,"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,"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,"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.onload= function(){ getProvince(); } </script >
<select name="province" id="province" onchange="getCity(this.value)"></select> <select name="city" id="city" onchange="getCountry(this.value)"></select> <select name="country1" id="country1"></select>原文链接:https://www.f2er.com/ajax/163712.html