昨天調試這個例子時，問我們公司的一個大牛，關於JS底層原生函數用法的問題，他說不知道，建議我去網上找一個小框架，看來 “不重復造輪子”的想法已經深入人心。而這個建議顯然背離我寫這個demo原本的意願。當然，後來google到了答案。
可能.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>
到此，這個例子基本結束了，有問題，請在評論區留言。
