AJAX_ASP_ACCESS_级联菜单

//创建 xmlhttpRequest 对象 function createxmlhttpRequest() { var xmlhttp; /* if(window.xmlhttpRequest) { xmlhttp=new xmlhttpRequest();// code for IE7+, Firefox, Chrome, Opera, Safari } else { xmlhttp=new ActiveXObject("Microsoft.xmlhttp");// code for IE6, IE5 } return xmlhttp; */ /* try { // Firefox, Opera 8.0+, Safari xmlhttp=new xmlhttpRequest(); } catch (e) { // Internet Explorer try { xmlhttp=new ActiveXObject("Msxml2.xmlhttp"); } catch (e) { try { xmlhttp=new ActiveXObject("Microsoft.xmlhttp"); } catch (e) { alert("您的浏览器不支持AJAX！"); return false; } } } return xmlhttp; */ var xmlhttp = false; //一般先判断非IE浏览器 //window对象中有XMLHttpRequest存在就是非IE，包括（IE7，IE8） if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest();//非IE以及IE7，IE8浏览器 if(xmlhttp.overrideMimeType) { xmlhttp.overrideMimeType("text/xml");//重置mime类型 } } //window对象中有ActiveXObject属性存在就是IE浏览器的低版本 else if(window.ActiveXObject) { //各种IE浏览器创建Ajax对象时传递的参数 var versions=['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP']; for(var i=0; i<versions.length; i++) { try { xmlhttp=new ActiveXObject(versions[i]);//各个IE浏览器版本的参数不同 if(xmlhttp) { return xmlhttp; } } catch(e) { xmlhttp=false; } } } return xmlhttp; } function getTwoClass(oneClassId) { xmlhttp=createxmlhttpRequest(); xmlhttp.open("GET","getTwoClass.asp?oneClassId="+oneClassId,true); //打开请求 xmlhttp.setRequestHeader("Content-Type", "gb2312"); //向一个打开但未发送的请求设置或添加一个 HTTP 请求。 //回调函数 //onreadystatechange为每次 readyState 属性改变的时候调用的事件句柄函数。 xmlhttp.onreadystatechange=function() { //readyState:HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。 //由服务器返回的 HTTP 状态代码，如 200 表示成功 if (xmlhttp.readyState==4 && xmlhttp.status==200) { //在IE浏览器中动态创建option元素不能直接用innerHTML if(window.ActiveXObject) //判断是否为IE浏览器，若window中存在ActiveXObject，则为IE浏览器 { //responseText:目前为止为服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。 str=xmlhttp.responseText; str=str.replace(/></g,">|<");//在option元素之间插入|，便于切割成数组 //alert(str); arr=new Array(); arr=str.split("|");//转换为数组 len=arr.length; //alert(len); arr_value=new Array();//示例：<option value='0'>--请选择一级分类--</option>，arr_value存储“0”，arr_innerHTML存储“--请选择一级分类--” arr_innerHTML=new Array(); for(i=0;i<len;i++) { //alert(arr[i]); tmp1=arr[i].match(/'\d*'/g); tmp2=arr[i].match(/>.*</g); //alert(typeof(tmp1));//tmp1和tmp2为对象 //alert(tmp1); //alert(tmp2); len1=tmp1.length; len2=tmp2.length; //alert(len1); //alert(len2); for(j=0;j<len1;j++) { len3=tmp1[j].length; //alert(tmp1[j].substr(1,(len3-2))); arr_value[i]=tmp1[j].substr(1,(len3-2)); } for(j=0;j<len2;j++) { len4=tmp2[j].length; //alert(tmp2[j].substr(1,(len4-2))); arr_innerHTML[i]=tmp2[j].substr(1,(len4-2)); } } //alert(arr_value); //alert(arr_innerHTML); document.getElementById("twoClass").options.length=0 for(i=0;i<len;i++) { theOption=document.createElement("option"); theOption.innerHTML=arr_innerHTML[i]; theOption.value=arr_value[i]; document.getElementById("twoClass").appendChild(theOption); } document.getElementById("threeClass").options.length=0 theOption=document.createElement("option"); theOption.innerHTML="--请选择三级分类--"; theOption.value=0; document.getElementById("threeClass").appendChild(theOption); } else { document.getElementById("twoClass").innerHTML=xmlhttp.responseText; document.getElementById("threeClass").innerHTML="<option value='0'>--请选择三级分类--</option>"; } } } xmlhttp.send(null); //发送请求 } function getThreeClass(twoClassId) { xmlhttp=createxmlhttpRequest(); xmlhttp.open("GET","getThreeClass.asp?twoClassId="+twoClassId,true); xmlhttp.setRequestHeader("Content-Type", "gb2312"); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { if(window.ActiveXObject) { str=xmlhttp.responseText; str=str.replace(/></g,">|<"); //alert(str); arr=new Array(); arr=str.split("|"); len=arr.length; //alert(len); arr_value=new Array(); arr_innerHTML=new Array(); for(i=0;i<len;i++) { //alert(arr[i]); tmp1=arr[i].match(/'\d*'/g); tmp2=arr[i].match(/>.*</g); //alert(tmp1); //alert(tmp2); len1=tmp1.length; len2=tmp2.length; //alert(len1); //alert(len2); for(j=0;j<len1;j++) { len3=tmp1[j].length; //alert(tmp1[j].substr(1,(len3-2))); arr_value[i]=tmp1[j].substr(1,(len3-2)); } for(j=0;j<len2;j++) { len4=tmp2[j].length; //alert(tmp2[j].substr(1,(len4-2))); arr_innerHTML[i]=tmp2[j].substr(1,(len4-2)); } } //alert(arr_value); //alert(arr_innerHTML); document.getElementById("threeClass").options.length=0 for(i=0;i<len;i++) { theOption=document.createElement("option"); theOption.innerHTML=arr_innerHTML[i]; theOption.value=arr_value[i]; document.getElementById("threeClass").appendChild(theOption); } } else { document.getElementById("threeClass").innerHTML=xmlhttp.responseText; } } } xmlhttp.send(null); }