c#.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>
当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);
<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>
