可能.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 >
< 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( " BList " );
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 >
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( " BList " );
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);
// 数据库操作,得到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 >
- < Vendor >
< VendorId > 7 </ VendorId >
< VendorName > 千千 </ VendorName >
</ Vendor >
</ Data >