Ajax 无刷新大小类联动

思路：显示页后台代码不做sql的操作，单独建一个页面（dosql.aspx）用来执行sql操作，然后将结果response出来。而显示页会用一个对象等待这个页面的返回结果，当结果返回后，再用js把结果在显示页面显示出来即可。

最终效果：

页面js代码如下：

<script language="javascript" type="text/jscript">
    var request = false;//异步调用用到的对象就是这个东东

/*下面一长串的try只是为了避免浏览器不同申明不了request对象*/
   try
   {
     request = new XMLHttpRequest();
   }
   catch (trymicrosoft)
   {
     try
     {
       request = new ActiveXObject("Msxml2.XMLHTTP");
     }
     catch (othermicrosoft) {
       try
       {
         request = new ActiveXObject("Microsoft.XMLHTTP");
       }
       catch (failed)
       {
         request = false;
       } 
     }
   }

   if (!request)
   {
     alert("Error initializing XMLHttpRequest!");
   }

   function ShowInfo()
   {
     if (request.readyState == 4)     
         {
            var text=request.responseText.split("|");
            document.all.SmClass.options.length=0;
            for(var n=0;n<text.length;n+=2)
            {
                op=window.Option(text[n+1],text[n]);
                document.all.SmClass.options.add(op);
            }
         }
   }
  
   //显示数据
   function ShowSerch()
   {
        if (request.readyState == 4)     
        {
            text=request.responseText.split("|");
            var t=document.getElementById("ProductList");
            text[text.length-1]=null;
           //添加表格行显示数据
            for(var i=0;i<text.length;i+=5)
            {
                if(text[i]==null)
                break;
                var tr=t.insertRow();
                var td1=tr.insertCell();
                var td2=tr.insertCell();
                var td3=tr.insertCell();
                var td4=tr.insertCell();
                var td5=tr.insertCell();
                td1.innerText=text[i];
                td2.innerText=text[i+1];
                td3.innerText=text[i+2];
                td4.innerText=text[i+3];
                td5.innerText=text[i+4];
                           
            }
        }
   }

function Serch()
{
     var table=document.getElementById("ProductList");
     /*删除表格多余的行*/
     for(var i=table.rows.length;i>1;i--)
     {
        table.deleteRow(i-1);
     }
     /*发送请求*/
     var text=document.getElementById("txtSerch").value;
     var cid=document.getElementById("SmClass").value;
     var parentid=document.getElementById("BigClass").value;
     url="SelectClassSQL.aspx?text="+escape(text)+"&cid="+escape(cid)+"&parentid="+escape(parentid);
     request.open("GET",url, true);
     request.onreadystatechange = ShowSerch;//ShowSerch()为服务器响应后的显示数据函数
     request.send(null);
}

function ChangeClass(BigClassId)
{
     url="SelectClassSQL.aspx?BigClassId="+escape(BigClassId);
     request.open("GET",url, true);
     request.onreadystatechange = ShowInfo;
     request.send(null);
}
    </script>