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,areacodei=1Do while not Rs.eofprovcode = 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+1Rs.movenextLoopRs.CloseSet 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 = 1Do while not Rs.eofIf i=1 Then citycode = Rs("citycode")Response.write "<option value="""&Rs("citycode")&""">"&Rs("cityname")&"</option>"i = i+1Rs.movenextLoopRs.CloseSet 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=1Do while not Rs.eofIf i=1 Then areacode = Rs("areacode")Response.write "<option value="""&Rs("areacode")&""">"&Rs("areaname")&"</option>"i = i + 1Rs.movenextLoopRs.CloseSet 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.eofResponse.write "<option value="""&Rs("streetcode")&""">"&Rs("streetname")&"</option>"Rs.movenextLoopRs.CloseSet 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,areacodeaction=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 mainTypeCodemainTypeCode = 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.moveNextLoop Rs.closeSet Rs = NothingSQL = "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.moveNextLoop Rs.closeSet Rs = NothingResponse.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=1Do 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+1rs.moveNextLoop Rs.closeSet Rs = Nothing'根据市编码显示区SQL = "select * from s_area t where t.citycode='"&cityCode&"'"Set Rs = Conn.execute(SQL)i=1Do 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 + 1rs.moveNextLoop Rs.closeSet Rs = NothingSQL = "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.moveNextLoop Rs.closeSet Rs = NothingResponse.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=1Do 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 + 1rs.moveNextLoop Rs.closeSet Rs = NothingSQL = "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.moveNextLoop Rs.closeSet Rs = NothingResponse.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.moveNextLoop Rs.closeSet Rs = NothingResponse.write "</response>"End Select Else Response.write "未进入"End If %>

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