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

2013 年 1 月 4 日3610

我们需要两个页面a.aspx、b.aspx,a页面代码如下(就用最常见的,两个下拉列表连动的例子):

<body>

  <form method="post" runat="server">

  <select onchange="SetBList()">

    <option value="0">A</option>

    <option value="1">B</option>

    <option value="3">C</option>

  </select>

  <select></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>

【责编:cc】

0 0