jscript.js

利用js实现与服务器的异步交互


//本例是通过纯JavaScript实现 

//创建XMLHttpRequest异步对象
function getXmlHttpRequest()
{
    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("Your browser does not support AJAX!");      
                return false;      
             }    
          }  
     }  
     return xmlHttp;
}

function getCity()
{
    var xmlHttp=getXmlHttpRequest();
    var Povince=document.all["ddlProvince"];
    
    //省份ID编号
    var PovinceID=Povince.options[Povince.selectedIndex].value;
    //接受请求的页面
    var HandlerUrl="./Ajax/Handler.ashx?id="+PovinceID+"&num="+Math.random();
    //浏览器支持Ajax
    if(xmlHttp)
    {
        xmlHttp.onreadystatechange=function()
        {
            /*
            0 The request is not initialized 
            1 The request has been set up 
            2 The request has been sent 
            3 The request is in process 
            4 The request is complete 
            */
            if(xmlHttp.readyState==4)
            {
                if(xmlHttp.status==200)
                {
                    var xmlDoc=xmlHttp.responseXML.documentElement;
                    var ddlCity=document.getElementById("selCity");
                    
                    //Clear dropDownList of city
                    while(ddlCity.length>0)
                    {
                        ddlCity.remove(0);
                    }
                    
                    for(var i=0;i<xmlDoc.getElementsByTagName("citys").length;i++)
                    {
                       var CityNodes=xmlDoc.getElementsByTagName("citys")[i].childNodes;
                       var OpCity=new Option();
                       for(var j=0;j<CityNodes.length;j++)
                       {
                            switch(CityNodes[j].tagName.toUpperCase())
                            {
                                case "CITYID":
                                     OpCity.value=CityNodes[j].firstChild.nodeValue;
                                     break;
                                case "CITY":
                                     OpCity.text=CityNodes[j].firstChild.nodeValue;
                                     break;
                                default:
                                    break;
                            }
                       }
                       ddlCity.add(OpCity);
                    }
                }
            }
        }
        xmlHttp.open("get",HandlerUrl,true);
        xmlHttp.send(null);
    }
}

//初始化事件
window.onload=function()
{
    document.all["ddlProvince"].onchange=getCity;
}