在ASP.NET中使用無框架的Ajax實(shí)例
作者：緣夢(mèng)
可能.net程序員手寫方法的時(shí)候很少，在初學(xué)時(shí)，就被前輩灌輸“使用框架！”、“用系統(tǒng)自帶方法！”這個(gè)概念，直接導(dǎo)致我們某方面相對(duì)孱弱。這也是為什么，用java寫Ajax例子信手拈來，而用C#寫，卻困難重重——網(wǎng)上很難找到不用Ajax.dll實(shí)現(xiàn)的例子。
我們需要兩個(gè)頁面a.aspx、b.aspx，a頁面代碼如下（就用最常見的，兩個(gè)下拉列表連動(dòng)的例子）：
＜body＞
＜form id="Form1" method="post" runat="server"＞
＜select id="AList" onchange="SetBList()"＞
＜o(jì)ption value="0"＞A＜/option＞
＜o(jì)ption value="1"＞B＜/option＞
＜o(jì)ption value="3"＞C＜/option＞
＜/select＞
＜select id="BList"＞＜/select＞
＜/form＞
＜/body＞
|
當(dāng)a頁面觸發(fā)onchange事件后，我們進(jìn)入寫在a頁面的SetBList()方法中，這里將完整的js列出來：
＜script language="javascript"＞
var xmlHttp;
function SetBList() {
var avalue = document.getElementById("AList").value;
var url = "b.aspx?Avalue=" + avalue;
createXMLHttpRequest(); // 創(chuàng)建xmlHttp對(duì)象
xmlHttp.onreadystatechange = handleStateChange; // 當(dāng)xmlHttp狀態(tài)碼發(fā)生改變時(shí)，調(diào)用handleStateChage方法
xmlHttp.open("GET", url, true); // GET方法發(fā)送請(qǐng)求
xmlHttp.send(null);
}
function BListInitial() {
// 先清空一下BList的option
clearBList();
var blist = document.getElementById("BList"); // 獲取BList對(duì)象
var rs = xmlHttp.responseXML.getElementsByTagName("City"); // 從返回xml文檔中，讀?。糃ity＞標(biāo)簽的數(shù)據(jù)
// 這個(gè)循環(huán)取值的地方，卡了我一會(huì)，將xmlHttp.responseXML創(chuàng)建成一個(gè)xml文檔，然后找讀文檔的方法，但問題是不同瀏覽器創(chuàng)建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標(biāo)簽部分刪除。然后在b頁面的Page_Load方法中，對(duì)數(shù)據(jù)庫進(jìn)行操作，然后數(shù)據(jù)寫成xml的格式，例如：
// 數(shù)據(jù)庫操作，得到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);
|
在整體運(yùn)行之前可以先將b頁面測(cè)試一下，如果得到類似如下結(jié)果，則說明，數(shù)據(jù)部分是沒問題的。
- ＜Data＞
- ＜Vendor＞
＜VendorId＞7＜/VendorId＞
＜VendorName＞千千＜/VendorName＞
＜/Vendor＞
＜/Data＞
|
【編輯推薦】
責(zé)任編輯：楊鵬飛
來源：
博客園
