Ajax级联操作

      Web项目中总是会用到异步操作，现在的异步操作可以用各种各样的控件来实现，但实现原理还是一样的，本人更喜欢使用最原始的Ajax操作去实现异步处理，本文仅献给那些喜欢实现Ajax和项目中要用到Ajax的朋友。

      Ajax实现原理就是客户端通过javascript操作调用服务器端操作，并处理服务器返回结果，同时保证了用户操作的页面不出现刷新操作。

      下面的实现是一个实现了省市区县级联操作的实例：

所在城市：<select name="province" class="input font12" οnchange="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" οnchange="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" οnchange="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 %>

以上就是全部的代码，如果有什么不明白的地方可以留言给我，看到的话，我会及时回复。