Ajax級聯操作

      Web項目中總是會用到異步操作，現在的異步操作可以用各種各樣的控件來實現，但實現原理還是一樣的，本人更喜歡使用最原始的Ajax操作去實現異步處理，本文僅獻給那些喜歡實現Ajax和項目中要用到Ajax的朋友。

      Ajax實現原理就是客戶端通過javascript操作調用服務器端操作，並處理服務器返回結果，同時保證了用戶操作的頁面不出現刷新操作。

      下面的實現是一個實現了省市區縣級聯操作的實例：

所在城市：<select name="province" class="input font12" onchange="refreshList(this.options[this.selectedIndex].value,'city');"> <% Sql = "select * from s_province t order by provcode asc" Set Rs = Conn.execute(Sql) Dim i,provcode,citycode,areacode i=1 Do while not Rs.eof provcode = Rs("provcode") If i=1 Then Response.write "<option value="""&Rs("provcode")&""" selected>"&Rs("provname")&"</option>" Else Response.write "<option value="""&Rs("provcode")&""" >"&Rs("provname")&"</option>" End If i = i+1 Rs.movenext Loop Rs.Close Set Rs = nothing %> </select> <select name="city" id="city" class="input font12" onchange="refreshList(this.options[this.selectedIndex].value,'area');"> <% SQL = "select * from s_city t Where t.provcode='"&provcode&"'" Set Rs = Conn.execute(Sql) i = 1 Do while not Rs.eof If i=1 Then citycode = Rs("citycode") Response.write "<option value="""&Rs("citycode")&""">"&Rs("cityname")&"</option>" i = i+1 Rs.movenext Loop Rs.Close Set Rs = nothing %> </select> <select name="area" id="area" class="input font12" onchange="refreshList(this.options[this.selectedIndex].value,'street');"> <% SQL = "select * from s_area t Where t.citycode='"&citycode&"'" Set Rs = Conn.execute(Sql) i=1 Do while not Rs.eof If i=1 Then areacode = Rs("areacode") Response.write "<option value="""&Rs("areacode")&""">"&Rs("areaname")&"</option>" i = i + 1 Rs.movenext Loop Rs.Close Set Rs = nothing %> </select> <select name="street" id="street" class="input font12" > <% SQL = "select * from s_street t Where t.areacode='"&areacode&"'" Set Rs = Conn.execute(Sql) Do while not Rs.eof Response.write "<option value="""&Rs("streetcode")&""">"&Rs("streetname")&"</option>" Rs.movenext Loop Rs.Close Set Rs = nothing %> </select>

上面一塊代碼是頁面顯示部分，其實就是初始化頁面的省市區縣。

以下部分是Ajax的核心部分：

var XMLHttpReq; var updateObj = ""; // 創建XMLHttpRequest對象 function createXMLHttpRequest(){ if(window.XMLHttpRequest){//Mozilla瀏覽器 XMLHttpReq = new XMLHttpRequest(); } else if (window.ActiveXObject) { try{ XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP"); }catch (e){ try{ XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); }catch (e){} } } } // 發送請求函數 function sendRequest(url,targetObj){ createXMLHttpRequest(); updateObj = targetObj; if(updateObj=="pagename"){ var post = "pagename=" + encodeURIComponent(encodeURIComponent(document.getElementById("pagename").value)); //兩次 XMLHttpReq.open("POST",url,true); XMLHttpReq.onreadystatechange = processResponse;//指定響應函數 XMLHttpReq.setRequestHeader("Cache-Control","no-cache"); XMLHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded;"); XMLHttpReq.send(post); //注意：POST方式，使用這個來發送內容 }else{ XMLHttpReq.open("GET",url,true); XMLHttpReq.onreadystatechange = processResponse;//指定響應函數 XMLHttpReq.send(null);// 發送請求 } //XMLHttpReq.open("GET",url,true); //XMLHttpReq.onreadystatechange = processResponse;//指定響應函數 //XMLHttpReq.send(null);// 發送請求 } //處理響應函數 function processResponse(){ if(XMLHttpReq.readyState == 4){//判斷對象狀態 if(XMLHttpReq.status == 200){// 信息已經成功返回，開始處理信息 updateList(); }else{ alert("您所請求的頁面有異常"); } } } // 刷新列表框函數 function refreshList(code,targetObj){ var url = ""; if(targetObj=="mainPage"){ targetObj="subpage" } url = "/Process/Ajax.func.asp?action="+targetObj+"&code="+code; sendRequest(url,targetObj); } // 驗證店鋪名稱是否已經被登記 function checkShop(){ var srcfrm = $("form1"); if(chkspace(srcfrm.pagename.value)==true){ showerr('提示：黃頁名稱不能爲空。'); srcfrm.pagename.focus(); return false; } else{ if(chkfilter(srcfrm.pagename.value)==true){ showerr('提示：黃頁名稱中含有非法字符。'); srcfrm.pagename.focus(); return false; }else{ url = "/Process/Ajax.post.asp"; sendRequest(url,"pagename"); } } } // 更新列表框中列表項函數 function updateList(){ clearList(updateObj); processXMLData(updateObj); } var xmlDoc; //兼容IE和FF的加載xml字符串的通用函數 function loadXmlStr(strxml){ try{ xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.loadXML(strxml); }catch(e){ var oParser=new DOMParser(); xmlDoc=oParser.parseFromString(strxml,"text/xml"); } return xmlDoc; } // 處理XML數據,加載至相應的下列列表中 function processXMLData(targetObj){ xmlDoc = loadXmlStr(XMLHttpReq.responseText); //alert(XMLHttpReq.responseText); // 取得XML文檔的根 var root = xmlDoc.documentElement; switch(targetObj){ case "pagename":{ document.getElementById("checkPageResult").innerHTML = XMLHttpReq.responseText; break; } case "subpage":{ processOptions(root,"subpage-main"); processOptions(root,"subpage"); break; } case "city":{ processOptions(root,"city"); processOptions(root,"area"); processOptions(root,"street"); break; } case "area":{ processOptions(root,"area"); processOptions(root,"street"); break; } case "street":{ processOptions(root,"street"); break; } } } // 處理下拉列表信息 function processOptions(root,targetObj){ var subPage = root.getElementsByTagName(targetObj); var option = null; for(var i=0;i<subPage.length;i++){ var category = subPage[i]; option = new Option(); option.appendChild(document.createTextNode(category.getElementsByTagName("name")[0].firstChild.data)); option.setAttribute("value", category.getElementsByTagName("value")[0].firstChild.data); document.getElementById(targetObj).appendChild(option); } } // 清除列表框中選項的函數 function clearList(obj){ switch(obj){ case "subpage":{ clearNodes("subpage-main"); clearNodes("subpage"); clearNodes("addCategory"); break; } case "city":{ clearNodes("city"); clearNodes("area"); clearNodes("street"); break; } case "area":{ clearNodes("area"); clearNodes("street"); break; } case "street":{ clearNodes("street"); break; } } } // 消除已有信息 function clearNodes(targetObj){ var clearObj = document.getElementById(targetObj); while(clearObj.childNodes.length>0){ clearObj.removeChild(clearObj.childNodes[0]); } } // 處理列表信息 function moveModule(o_col,d_col){ var ops = document.getElementById(o_col).options; var oplen=ops.length; var isok=0; // 從分類中選擇信息添加至用戶分類中 if(o_col == "subpage"){ var selectedcount = 0; for(var i=0; i<oplen; i++) { if(ops[i].selected) { selectedcount = selectedcount + 1; } } if(document.getElementById(d_col).options.length + selectedcount > 5) { alert("只能選擇五個。"); return; } } var selectarray = new Array(); for(var o_sl=oplen-1;o_sl>=0;o_sl--) { var d_sl = document.getElementById(d_col).length; selectarrayLength = selectarray.length; if (o_sl != -1 && document.getElementById(o_col).options[o_sl].value > ""&&ops[o_sl].selected) { oText = document.getElementById(o_col).options[o_sl].text; oValue = document.getElementById(o_col).options[o_sl].value; document.getElementById(o_col).options[o_sl] = null; document.getElementById(d_col).options[d_sl] = new Option (oText, oValue, false, true); selectarray[selectarrayLength] = d_sl; isok=1; } } if(o_col == "subpage") { for(var x=0; x<document.getElementById("addCategory").options.length; x++) { document.getElementById("addCategory").options[x].selected = false; } for(var i=0; i<selectarray.length; i++){ document.getElementById("addCategory").options[selectarray[i]].selected = true; } } if(isok==0) { alert("請選擇一個類目進行移動。"); } /* if(document.getElementById("addCategory").options.length == 5) { document.getElementById("addCategory").disabled = true; }else{ document.getElementById("addCategory").disabled = false; } */ }

代碼中各部分都提供了詳細的註釋信息，相信各位應該可以看的很明白。

以下是服務器端代碼：

<!-- #include file=../process/connbase.asp --> <!-- #include file=../process/function.asp --> <% '----------------------------------- '@desc: Ajax統一處理函數 '@author:jack '@time:2009/10/13 '----------------------------------- Dim action Dim i,provCode,citycode,areacode action=request("action") If Not IsNull(action) And action<>"" Then ' 根據行爲不同調用對應的ajax處理 Select Case action Case "subpage" Response.ContentType="text/xml" Response.Charset = "gb2312" Response.AddHeader "cache-ctrol", "no-cache" Response.write "<response>" Dim mainTypeCode mainTypeCode = request.QueryString("code") SQL = "select * from pag_subtype t where t.maintypecode='"&mainTypeCode&"' and typeflag=0 order by sortcode" Set Rs = Conn.execute(SQL) Do While Not Rs.eof Response.write "<subpage-main>" Response.write "<name>"&Rs("typename")&"</name>" Response.write "<value>"&Rs("typecode")&"</value>" Response.write "</subpage-main>" rs.moveNext Loop Rs.close Set Rs = Nothing SQL = "select * from pag_subtype t where t.maintypecode='"&mainTypeCode&"' and typeflag=1 order by sortcode" Set Rs = Conn.execute(SQL) Do While Not Rs.eof Response.write "<subpage>" Response.write "<name>"&Rs("typename")&"</name>" Response.write "<value>"&Rs("typecode")&"</value>" Response.write "</subpage>" rs.moveNext Loop Rs.close Set Rs = Nothing Response.write "</response>" Case "city" Response.ContentType="text/xml" Response.Charset = "gb2312" Response.AddHeader "cache-ctrol", "no-cache" Response.write "<response>" '根據省編碼顯示市 provCode = Request.QueryString("code") SQL = "select * from s_city t where t.provcode='"&provCode&"'" Set Rs = Conn.execute(SQL) i=1 Do While Not Rs.eof If i=1 Then citycode = Rs("citycode") Response.write "<city>" Response.write "<name>"&Rs("cityname")&"</name>" Response.write "<value>"&Rs("citycode")&"</value>" Response.write "</city>" i = i+1 rs.moveNext Loop Rs.close Set Rs = Nothing '根據市編碼顯示區 SQL = "select * from s_area t where t.citycode='"&cityCode&"'" Set Rs = Conn.execute(SQL) i=1 Do While Not Rs.eof If i=1 Then areacode = Rs("areacode") Response.write "<area>" Response.write "<name>"&Rs("areaname")&"</name>" Response.write "<value>"&Rs("areacode")&"</value>" Response.write "</area>" i = i + 1 rs.moveNext Loop Rs.close Set Rs = Nothing SQL = "select * from s_street t where t.areacode='"&areacode&"' order by streetname" Set Rs = Conn.execute(SQL) Do While Not Rs.eof Response.write "<street>" Response.write "<name>"&Rs("streetname")&"</name>" Response.write "<value>"&Rs("streetcode")&"</value>" Response.write "</street>" rs.moveNext Loop Rs.close Set Rs = Nothing Response.write "</response>" Case "area" Response.ContentType="text/xml" Response.Charset = "gb2312" Response.AddHeader "cache-ctrol", "no-cache" Response.write "<response>" '根據市編碼顯示區 cityCode = Request.QueryString("code") SQL = "select * from s_area t where t.citycode='"&cityCode&"'" Set Rs = Conn.execute(SQL) i=1 Do While Not Rs.eof If i=1 Then areacode = Rs("areacode") Response.write "<area>" Response.write "<name>"&Rs("areaname")&"</name>" Response.write "<value>"&Rs("areacode")&"</value>" Response.write "</area>" i = i + 1 rs.moveNext Loop Rs.close Set Rs = Nothing SQL = "select * from s_street t where t.areacode='"&areacode&"' order by streetname" Set Rs = Conn.execute(SQL) Do While Not Rs.eof Response.write "<street>" Response.write "<name>"&Rs("streetname")&"</name>" Response.write "<value>"&Rs("streetcode")&"</value>" Response.write "</street>" rs.moveNext Loop Rs.close Set Rs = Nothing Response.write "</response>" Case "street" Response.ContentType="text/xml" Response.Charset = "gb2312" Response.AddHeader "cache-ctrol", "no-cache" Response.write "<response>" '根據區編碼顯示街道 areaCode = Request.QueryString("code") SQL = "select * from s_street t where t.areacode='"&areaCode&"' order by streetname" Set Rs = Conn.execute(SQL) Do While Not Rs.eof Response.write "<street>" Response.write "<name>"&Rs("streetname")&"</name>" Response.write "<value>"&Rs("streetcode")&"</value>" Response.write "</street>" rs.moveNext Loop Rs.close Set Rs = Nothing Response.write "</response>" End Select Else Response.write "未進入" End If %>

以上就是全部的代碼，如果有什麼不明白的地方可以留言給我，看到的話，我會及時回覆。