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

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();
}

[{"AreaCode":"","AreaName":"河北","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"山西","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"内蒙古","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"辽宁","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"吉林","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"黑龙江","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"上海","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"江苏","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"浙江","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"安徽","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"福建","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"江西","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"山东","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"河南","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"湖北","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"湖南","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"广东","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"广西","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"海南","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"重庆","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"四川","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"贵州","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"云南","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"西藏","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"陕西","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"甘肃","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"青海","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"宁夏","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"新疆","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"台湾","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"香港","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"澳门","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null}]

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>