在ASP.NET中使用无框架的Ajax实例-asp.net ajax

我们需要两个页面a.aspx、b.aspx，a页面代码如下（就用最常见的，两个下拉列表连动的例子）：

＜body＞
    ＜form id="Form1" method="post" runat="server"＞
    ＜select id="AList" onchange="SetBList()"＞
        ＜option value="0"＞A＜/option＞
        ＜option value="1"＞B＜/option＞
        ＜option value="3"＞C＜/option＞
    ＜/select＞
    ＜select id="BList"＞＜/select＞
    ＜/form＞
 ＜/body＞
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

当a页面触发onchange事件后，我们进入写在a页面的SetBList()方法中，这里将完整的js列出来：

＜script language="javascript"＞
var xmlHttp;

function SetBList() {
    var avalue = document.getElementById("AList").value;

    var url = "b.aspx?Avalue=" + avalue;
    createXMLHttpRequest();  // 创建xmlHttp对象
    xmlHttp.onreadystatechange = handleStateChange;  // 当xmlHttp状态码发生改变时，调用handleStateChage方法
    xmlHttp.open("GET", url, true);   // GET方法发送请求
    xmlHttp.send(null);
}

function BListInitial() {
    // 先清空一下BList的option
    clearBList();

    var blist = document.getElementById("BList");  // 获取BList对象
    var rs = xmlHttp.responseXML.getElementsByTagName("City");  // 从返回xml文档中，读取＜City＞标签的数据
    // 这个循环取值的地方，卡了我一会，将xmlHttp.responseXML创建成一个xml文档，然后找读文档的方法，但问题是不同浏览器创建xml文档的方法不一样
    for(var i=0;i＜rs.length;i++) {
        var option = document.createElement("OPTION");
        option.text = rs[i].getElementsByTagName("CityName");
        option.value = rs[i].getElementsByTagName("CityCode");
        blist.options.add(option);
    }
}

function clearBList() {
    var ven = document.getElementById("VendorList");
    while(ven.options.length ＞ 0)
        ven.removeChild(ven.childNodes[0]);
}

function handleStateChange() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            BListInitial();
        }
    }
}

function createXMLHttpRequest() {
    // IE
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } 
    // Mozilla
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}
＜/script＞
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.

b.aspx页面将html部分全部删除，仅仅留一行：

＜%@ Page language="c#" Codebehind="b.aspx.cs" AutoEventWireup="false" Inherites="Test.Ajax" %＞
1.

原因是我们a页面要求返回的xml文档，因此，我们将Html标签部分删除。然后在b页面的Page_Load方法中，对数据库进行操作，然后数据写成xml的格式，例如：

// 数据库操作，得到DataTable dt

string xml = "＜Data＞";
foreach(DataRow row in dt.Rows)  {
    xml += "＜City＞";
    xml += "＜CityName＞" + row["CityName"] + "＜/CityName＞";
    xml += "＜CityCode＞" + row["CityCode"] + "＜/CityCode＞";
    xml += "＜/City＞";
}
xml += "＜/Data＞";

//  清页面格式，写xml
Response.ClearContent();
Response.Cache.SetNoStore();
Response.ContentType = "text/xml";
Response.ContentEncoding = System.Text.Encoding.UTF8;
Response.Write(xml);
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

在整体运行之前可以先将b页面测试一下，如果得到类似如下结果，则说明，数据部分是没问题的。

- ＜Data＞
    - ＜Vendor＞
        ＜VendorId＞7＜/VendorId＞ 
       ＜VendorName＞千千＜/VendorName＞ 
   ＜/Vendor＞
＜/Data＞
1.
2.
3.
4.
5.
6.

【编辑推荐】