JS实现Ajax，Josn数据的序列化和反序列化---例： 省市区联动（包含get，post）

服务器端相应JOSN数据   用到序列化和反序列化----命名空间using System.Web.Script.Serialization;

 public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //获取请求的参数
            string id = context.Request["id"].ToString();
            //通过参数查询父级id是参数的数据
            DataClasses1DataContext db = new DataClasses1DataContext();
            List<ChinaStates> list = db.ChinaStates.Where(p => p.ParentAreaCode == id).ToList();
            //将查询到的数据序列化，，用到using System.Web.Script.Serialization;
            JavaScriptSerializer jss = new JavaScriptSerializer();
            //调用jss.Serialize(list)方法，，得到josn类型的字符串，使用时要反序列化，得到josn数组
            string josnData = jss.Serialize(list);
            context.Response.Clear();
            context.Response.Write(josnData);
            context.Response.End();
        }

通过以上方法得到的JOSN数据----崩溃类型0.0

[{"AreaCode":"13","AreaName":"河北","ParentAreaCode":"0001","Root":false,"Zone":2,"NavigateURL":null},{"AreaCode":"14","AreaName":"山西","ParentAreaCode":"0001","Root":false,"Zone":2,"NavigateURL":null},{"AreaCode":"15","AreaName":"内蒙古","ParentAreaCode":"0001","Root":false,"Zone":2,"NavigateURL":null},{"AreaCode":"21","AreaName":"辽宁","ParentAreaCode":"0001","Root":false,"Zone":1,"NavigateURL":null},{"AreaCode":"22","AreaName":"吉林","ParentAreaCode":"0001","Root":false,"Zone":1,"NavigateURL":null},{"AreaCode":"23","AreaName":"黑龙江","ParentAreaCode":"0001","Root":false,"Zone":1,"NavigateURL":null},{"AreaCode":"31","AreaName":"上海","ParentAreaCode":"0001","Root":false,"Zone":7,"NavigateURL":null},{"AreaCode":"32","AreaName":"江苏","ParentAreaCode":"0001","Root":false,"Zone":7,"NavigateURL":null},{"AreaCode":"33","AreaName":"浙江","ParentAreaCode":"0001","Root":false,"Zone":7,"NavigateURL":null},{"AreaCode":"34","AreaName":"安徽","ParentAreaCode":"0001","Root":false,"Zone":7,"NavigateURL":null},{"AreaCode":"35","AreaName":"福建","ParentAreaCode":"0001","Root":false,"Zone":7,"NavigateURL":null},{"AreaCode":"36","AreaName":"江西","ParentAreaCode":"0001","Root":false,"Zone":4,"NavigateURL":null},{"AreaCode":"37","AreaName":"山东","ParentAreaCode":"0001","Root":false,"Zone":7,"NavigateURL":null},{"AreaCode":"41","AreaName":"河南","ParentAreaCode":"0001","Root":false,"Zone":4,"NavigateURL":null},{"AreaCode":"42","AreaName":"湖北","ParentAreaCode":"0001","Root":false,"Zone":4,"NavigateURL":null},{"AreaCode":"43","AreaName":"湖南","ParentAreaCode":"0001","Root":false,"Zone":4,"NavigateURL":null},{"AreaCode":"44","AreaName":"广东","ParentAreaCode":"0001","Root":false,"Zone":5,"NavigateURL":null},{"AreaCode":"45","AreaName":"广西","ParentAreaCode":"0001","Root":false,"Zone":6,"NavigateURL":null},{"AreaCode":"46","AreaName":"海南","ParentAreaCode":"0001","Root":false,"Zone":5,"NavigateURL":null},{"AreaCode":"50","AreaName":"重庆","ParentAreaCode":"0001","Root":false,"Zone":6,"NavigateURL":null},{"AreaCode":"51","AreaName":"四川","ParentAreaCode":"0001","Root":false,"Zone":6,"NavigateURL":null},{"AreaCode":"52","AreaName":"贵州","ParentAreaCode":"0001","Root":false,"Zone":6,"NavigateURL":null},{"AreaCode":"53","AreaName":"云南","ParentAreaCode":"0001","Root":false,"Zone":6,"NavigateURL":null},{"AreaCode":"54","AreaName":"西藏","ParentAreaCode":"0001","Root":false,"Zone":3,"NavigateURL":null},{"AreaCode":"61","AreaName":"陕西","ParentAreaCode":"0001","Root":false,"Zone":3,"NavigateURL":null},{"AreaCode":"62","AreaName":"甘肃","ParentAreaCode":"0001","Root":false,"Zone":3,"NavigateURL":null},{"AreaCode":"63","AreaName":"青海","ParentAreaCode":"0001","Root":false,"Zone":3,"NavigateURL":null},{"AreaCode":"64","AreaName":"宁夏","ParentAreaCode":"0001","Root":false,"Zone":3,"NavigateURL":null},{"AreaCode":"65","AreaName":"新疆","ParentAreaCode":"0001","Root":false,"Zone":3,"NavigateURL":null},{"AreaCode":"71","AreaName":"台湾","ParentAreaCode":"0001","Root":false,"Zone":0,"NavigateURL":null},{"AreaCode":"81","AreaName":"香港","ParentAreaCode":"0001","Root":false,"Zone":0,"NavigateURL":null},{"AreaCode":"91","AreaName":"澳门","ParentAreaCode":"0001","Root":false,"Zone":0,"NavigateURL":null}]

JosnViewer---神兵利器！

JS实现Ajax代码

window.onload = function () {
            LoadProv();
            LoadCity();
            LoadTown();

        };//onload

 function LoadProv() {
            //确认事件
            //1.创建xhr对象
            var xhr = null;
            if (XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else if (ActiveXObject) {
                xhr = new ActiveXObject("Microsoft.XMLHttp");
            }
            //2.设置回调函数
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    //将响应的数据反序列化
                    var josnObj = eval(‘(‘ + xhr.responseText + ‘)‘);
                    for (var i = 0; i < josnObj.length; i++) {
                        var opt = document.createElement(‘option‘);
                        opt.value = josnObj[i].AreaCode;
                        opt.innerHTML = josnObj[i].AreaName;
                        document.getElementById(‘ddlProv‘).appendChild(opt);
                    }//for
                    document.getElementById(‘ddlProv‘).onchange();//内部调用自己的onchange事件，加载下一个下拉
                }//if
            }
            //3.初始化xhr，三个参数，，提交方式，url，是否异步
            xhr.open(‘get‘, ‘Select.ashx?id=0001‘, true);
            //4.发送请求
            xhr.send(null);
        }

 function LoadCity() {
            //确认事件--改变事件
            document.getElementById(‘ddlProv‘).onchange = function () {
                //获取被选省份的id
                var id = this.value;
                //根据被选择的id加载市区
                var xhr = null;
                //1.创建xhr对象
                if (XMLHttpRequest) {
                    xhr = new XMLHttpRequest();
                } else if (ActiveXObject) {
                    xhr = new ActiveXObject("Microsoft.Http");
                }
                //2.设置回调函数
                xhr.onreadystatechange = function () {
                    //反序列化
                    var josnObj = eval(xhr.responseText);
                    document.getElementById(‘ddlCity‘).innerHTML = ‘‘;
                    if (xhr.readyState = 4 && xhr.status == 200) {
                        for (var i = 0; i < josnObj.length; i++) {
                            var opt = document.createElement(‘option‘);
                            opt.value = josnObj[i].AreaCode;
                            opt.text = josnObj[i].AreaName;
                            document.getElementById(‘ddlCity‘).appendChild(opt);
                        }
                    }
                    document.getElementById(‘ddlCity‘).onchange();
                }
                //3.初始化
                xhr.open(‘post‘, ‘Select.ashx‘, true);
                xhr.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘);
                //4.发送
                xhr.send(‘id=‘ + id);
            };//onchange
        }

function LoadTown() {
            //确认事件
            document.getElementById(‘ddlCity‘).onchange = function () {
                var id = this.value;
                var xhr = null;
                //1.创建对象
                if (XMLHttpRequest) {
                    xhr = new XMLHttpRequest();
                } else if (ActiveXObject) {
                    xhr = new ActiveXObject("Microsoft.Http");
                }
                //2.设置回掉函数
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        //反序列化响应，转化为josn格式
                        document.getElementById(‘ddlTown‘).innerHTML = ‘‘;
                        var josnObj = eval(xhr.responseText);
                        for (var i = 0; i < josnObj.length; i++) {
                            var opt = document.createElement(‘option‘);
                            opt.value = josnObj[i].AreaCode;
                            opt.text = josnObj[i].AreaName;
                            document.getElementById(‘ddlTown‘).appendChild(opt);
                        }
                    }
                }
                //3.初始化
                xhr.open(‘post‘, ‘SelectByPost.ashx‘, true);
                //post 必备
                xhr.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘);
                //4.发送
                xhr.send(‘id=‘ + id);
            };//onchange

<body>
    <form id="form1" runat="server">
        省：<asp:DropDownList ID="ddlProv" runat="server"></asp:DropDownList>
        市：<asp:DropDownList ID="ddlCity" runat="server"></asp:DropDownList>
        区/县：<asp:DropDownList ID="ddlTown" runat="server"></asp:DropDownList>
    </form>
</body>