在ASP.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＞