ajax 学习笔记之三 级联的操作

 ajax 学习笔记之三 级联的操作
基于ajax的级联,实现起来很简单.
说明:Select1 存放省份信息 ,Select2存放地市信息.
1.在页面加载的时候首先在服务器端获取省份信息.

 

function  getA()
... {
    var time=new Date().getTime();
    myRequest("../temp.aspx","action=getNum&time="+time,getAhandle);//getAhandle事件处理函数
}
function  getNumhandle()
... {
    if(req.readyState==4)
    ...{
        if(req.status==200)
        ...{
            var getText=req.responseText;
            var drp=document.getElementById("Select1");
            if(getText !="error")
            ...{
                var all=getText.split(",");
                var op;
                drp.innerHTML="";
                for(var i=0;i<all.length;i++)
                ...{
                    op=document.createElement("option");
                    op.innerText=all[i];
                    op.value=all[i];
                    drp.appendChild(op);
                }
            }
        }
    }
}

由getA将请求提交至服务器端,服务器端根据请求在数据库中获取数据,并将省份数据生成为逗号分割的字符串.返回至客户端.
以下为服务器端代码:C#

 

protected   void  Page_Load( object  sender, EventArgs e)
... {
if (action == "getNum")
    ...{
       string msg = "";
       msg = GetNum(Session["zongji"].ToString(), Session["fenji"].ToString());
       msg = msg.Remove(msg.LastIndexOf(','));
       Response.Write(msg.Trim());//因为返回的都是字符串信息,所有不必加Response.ContentType = "application/xml";
     }
}

2.页面加载后就可以看到省份的信息.在Select1中发生change()事件时候,可以基于Select1.value发送至服务器端检索省份下的地市信息.
可以建立getB()方法,具体操作同上.

实例中用到了MyRequest()方法,是我自定义的方法.代码如下

 

var  req;
function  createXMLHttpRequest()
  ... {
 
 if(window.XMLHttpRequest) ...{ //Mozilla 浏览器
        req = new XMLHttpRequest();
        if (req.overrideMimeType) ...{//设置MiME类别
            req.overrideMimeType("text/xml");
        }
    }
    else if (window.ActiveXObject) ...{ // IE浏览器
        try ...{
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) ...{
            try ...{
                req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) ...{}
        }
    }
    return req;
}
// 参数分别为url ,参数值 , 处理方法名
function  myRequest(url,urlvalue,handle)
... {
        req=createXMLHttpRequest();
        req.onreadystatechange=handle;
        req.open("POST",url,true);
        req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        req.send(urlvalue);
}

以上代码仅供参考,如有不妥,请指正.