AJAX调用方式总结(1)

长篇大论来讲述什么是AJAX，怎么使用AJAX，这样我总觉得太理论化了，接受起来会有一定的难度...所以，本篇博客的另一个主旨是：从实例入手，由浅到深。

最近用了近两天的时间对AJAX的知识进行了一个梳理，觉得是时候对AJAX的相关知识点做个总结了.....这当然也就是本篇博客的主旨了....我也不是很赞成用长篇大论来讲述什么是AJAX，怎么使用AJAX，这样我总觉得太理论化了，接受起来会有一定的难度...所以，本篇博客的另一个主旨是：从实例入手，由浅到深.....好了，直接开始入手吧

实例一：省份-城市的联级下拉框 

利用AJAX来获取数据实现联级下拉框，当省份下拉框的选项发生变化时，城市的选项对应变化，效果如图：

我们首先来实现后台，先将数据准备好了在实现前台获取数据，【考虑：当我们页面登录的时候，我们需要获取的数据】： 1).省份框中的省份; 2).因为登录时省份框的第一项选中，所以还需要第一个省份所对应的城市名，好了，需求知道了，代码就好写了，直接贴上后台代码：

 
 
protected void Page_Load(object sender, EventArgs e)  
        {  
            if (Request.QueryString["provid"] != null)  
            {  
                //首先获取传递过来的参数值  
                string provId = Request.QueryString["provid"].ToString();  
 
                //查询所有城市  
                string sqlprov = "select * from Provice";  
                SqlDataReader reader = DbHelperSQL.ExecuteReader(sqlprov);  
                string resultProv = "";  
                while (reader.Read())  
                {  
                    string id = reader[0].ToString();  
                    string provName = reader[1].ToString();  
 
                    //字符串拼接，为了前台获取时可以切分获取对应数据，用 '|' 来隔离 各个省份  
                    resultProv += "|" + string.Format("{0},{1}", id, provName);  
                }  
                reader.Close();  
 
                //根据省份框的ID来获取对应的城市名  
                string sqlcity =string.Format("select * from City where Proid='{0}'",provId);  
                SqlDataReader readercity = DbHelperSQL.ExecuteReader(sqlcity);  
                string resultCity = "";  
                while (readercity.Read())  
                {  
                    string cityId = readercity[1].ToString();  
                    string cityName = readercity[2].ToString();  
 
                    //同样用字符串拼接 用 '|' 来隔离 同一省份 的各个城市  
                    resultCity += "|" + string.Format("{0},{1}", cityId, cityName);  
                }  
 
                //去除第一个 '|' ,并且在最后拼接上 '&' 来区分省份和城市  
                resultProv = resultProv.Substring(1) + "&";  
 
                //最后的结果形式为【id,省份名|id2,省份名2|....&id,城市名|id2,城市名2|.....】  
                string result = resultProv + resultCity.Substring(1);  
 
                Response.Write(result);  
                Response.End();  
            }  
        } 

后台代码其实很简单，就是根据传过来的参数从数据库获取对应的数据，但是这里我们把获取到得数据最后都用字符串拼接起来了，而且是有规律的拼接，这是为什么呢？其实在注释上已经讲明了，就是为了方便前台获取对应的数据了，因为我们是使用后台返回文本形式的数据，这就是为什么我们拼接字符串了。。

接下来我们来实现前台，前台主要的任务就是获取后台返回的数据，并实现绑定......也是分块贴上代码

 
 
//实例化XmlHttpRequest对象  
 var xhr = null;  
        function CreateXhr() {  
            if (window.ActiveXObject)   
            {  
                try 
                {  
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");  
                }  
                catch (e)   
                {  
                    try 
                    {  
                        xhr = new ActiveXObject("Msxml2.XMLHTTP");  
                    }  
                    catch (e)   
                    {  
                        xhr = null;  
                    }  
                }  
            }  
            if (window.XMLHttpRequest) {  
                xhr = new XMLHttpRequest();  
            }  
 
            return xhr;  
        } 

当页面载入时，实现省份框以及第一个省份对应的城市框的绑定，代码：

 
 
//载入绑定省份   
       function getLoadProv() {  
           CreateXhr();  
           xhr.onreadystatechange = WatchState;  
           xhr.open("get", "getProvCity.aspx?provid=1&time=" + new Date());  
           xhr.send(null);  
       }  
 
       //监听载入绑定时状态  
       function WatchState() {  
           if (xhr.readyState == 4 && xhr.status == 200) {  
               //1,**|2,**&1,##|2,##  
               var result = xhr.responseText;  
               var provs = result.split('&')[0].split('|');  
               var citys = result.split('&')[1].split('|');  
 
               //省份下拉框清空  
               document.forms[0].prov.length = 0;  
 
               //绑定省份框  
               for (var i = 0; i < provs.length; i++) {  
                   var prov = provs[i].split(',');  
                   //实例化一个选项  
                   var op = new Option();  
                   op.value = prov[0];  
                   op.text = prov[1];  
                   document.forms[0].prov.options.add(op);  
               }  
 
               //城市下拉框清空  
               document.forms[0].city.length = 0;  
 
               //绑定城市框  
               for (var j = 0; j < citys.length; j++) {  
                   var city = citys[j].split(',');  
                   var op = new Option();  
                   op.value = city[0];  
                   op.text = city[1];  
                   document.forms[0].city.options.add(op);  
               }                  
           }  
       } 

当省份框的选项发生变化时实现联级变化，代码：

 
 
//获取城市  
function GetCity() {  
     
    //获取省份框选中的值  
    var provId = document.forms[0].prov.value;  
 
    CreateXhr();  
    xhr.onreadystatechange = UpdateCity;  
    xhr.open("get", "getProvCity.aspx?provid=" + provId + "&time=" + new Date());  
    xhr.send(null);  
}  
 
//修改城市下拉框内容  
function UpdateCity() {  
    if (xhr.readyState == 4 && xhr.status == 200) {  
        var result = xhr.responseText;  
        var citys = result.split('&')[1].split('|');  
        //城市下拉框清空  
        document.forms[0].city.length = 0;  
 
        //绑定城市框  
        for (var j = 0; j < citys.length; j++) {  
            var city = citys[j].split(',');  
            var op = new Option();  
            op.value = city[0];  
            op.text = city[1];  
            document.forms[0].city.options.add(op);  
        }                  
    } 

前台html代码：

 
 
html  
 <body> 
     <form id="form1" runat="server"> 
     <div> 
         <select id="prov" onchange="GetCity();"> 
         </select> 
         <select id="city"> 
         </select> 
     </div> 
     </form> 
 </body>