在ASP.NET中使用无框架的Ajax实例

开发 后端
可能.net程序员手写方法的时候很少,在初学时,就被前辈灌输“使用框架!”、“用系统自带方法!”这个概念,直接导致我们某方面相对孱弱。这也是为什么,用java写Ajax例子信手拈来,而用C#写,却困难重重——网上很难找到不用Ajax.dll实现的例子。

我们需要两个页面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>

当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>

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

<%@ Page language="c#" Codebehind="b.aspx.cs" AutoEventWireup="false" Inherites="Test.Ajax" %>

原因是我们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);

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

- <Data>
    - <Vendor>
        <VendorId>7</VendorId> 
       <VendorName>千千</VendorName> 
   </Vendor>
</Data>

【编辑推荐】

  1. 初探ASP.NET MVC框架
  2. ASP.NET MVC案例教程
  3. ASP.NET六大实用技巧
责任编辑:杨鹏飞 来源: 博客园
相关推荐

2009-07-30 12:19:32

ASP.NET中使用A

2009-07-20 16:45:41

使用StringBuiASP.NET

2009-07-21 17:27:12

UpdateProgrASP.NET AJA

2009-07-22 15:58:52

ASP.NET AJA

2009-01-16 13:17:16

AjaxASP.NET.NET

2009-05-05 14:02:14

PlaceHolder控件ASP.NET

2009-03-09 10:28:45

AJAXASP.NETWEB

2009-07-27 09:07:04

Profile SerASP.NET AJA

2009-02-05 13:40:03

TreeviewXMLASP.NET

2009-07-28 13:06:45

ASP.NET MVC

2009-07-22 16:11:43

ASP.NET AJA

2009-07-22 16:25:41

ASP.NET AJA

2009-07-22 16:17:39

ASP.NET AJA

2009-07-24 13:41:15

ASP.NET AJA

2009-07-22 16:05:34

ASP.NET AJA

2009-01-08 10:20:56

AutoCompletAjaxASP.NET

2009-03-13 09:48:33

ASP.NETAjaxJQuery

2009-07-30 12:30:27

ASP.NET中使用S

2009-07-20 13:14:25

安装ASP.NET A

2009-07-31 13:24:43

ASP.NET AJA
点赞
收藏

51CTO技术栈公众号