簡單的ajax(菜鳥級)

經常有朋友問我,Google,馬鈴薯網等那各種輔助輸入功能是如何?...我是用的ajax實現的.描述如下:

一 建立輸入頁面 包含如下文字框

      <input id="txtSearch" style="width: 348px"   onkeyup ="GetSearchString();"  type="text" />

     使用者鍵盤輸入時,觸發onkeyup事件

二 在js檔案中建立ActiveXObject  並把txtSearch中已經輸入的值日傳遞到CkNodifyNo.ashx頁面 一座篩選,代碼

 var xmlHttp;
   function CreateXmlHttpRequest()
   {
      if(window.ActiveXObject)
      {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
       }
     else if(window.XMLHttpRequest)
     {
       xmlHttp=new XMLHttpRequest();
      }
    } 
  
   
 function GetSearchString()
   { 
    var StrSearch=document.getElementById("txtSearch").value;
   
       if(StrSearch.length>0)
       {
     
      CreateXmlHttpRequest();
      xmlHttp.open("GET","Hander/CkNodifyNo.ashx?SearchStr="+StrSearch,true);
      //"/"+document.getElementById('drpRoomNum').value,true)
      xmlHttp.onreadystatechange=callback;
      xmlHttp.send(null);   
      }
   }------------------------①此為js的一部分 另一部分在下面會貼出來的

 三  CkNodifyNo.ashx頁面做出篩選,然後然會篩選結果 代碼如下:

 

<%@ WebHandler Language="C#" Class="CkNodifyNo" %>
using System;
using System.Web;
using System.Data;
using System.Data.SqlClient;

public class CkNodifyNo : IHttpHandler {
   
    public void ProcessRequest (HttpContext context) {
        //context.Response.ContentType = "text/plain";
        //context.Response.Write("Hello World");

        //===============
        //睲埃絯
        context.Response.Expires = -1;
        if (!object.Equals(null, context.Request.QueryString["SearchStr"]))
        {
            string sth = context.Request.QueryString["SearchStr"].ToString();
            context.Response.ContentType = "text/plain";
            //context.Response.ContentType = "text/html";
            context.Response.Write(getString(sth));
            //context.Response.Write("OK");
            context.Response.End();
        }
        else
        {
            context.Response.ContentType = "text/html";
            context.Response.Write("NO");
            context.Response.End();
        }
    }

    private string getString(string sth)
    {
      
        string RetString = string.Empty;
        switch (sth) //為了方面這裡沒有操作資料庫,寫死了返回的字串
        {
            case "t":
                return "the^tea^teacher^tee^tett^tesbook^tesving^test^test programe";
                break;
            case "te":
                return "tea^teacher^tee^tett^tesbook^tesving^test^test programe";
                break;
            case "tes":
                return "tesbook^tesving^test^test programe";
                break;
            case "test":
                return "test programe";
                break;
            default:
                return "$#@$";
                break;

        }
       
     
    }

 
    public bool IsReusable {
        get {
            return false;
        }
    }
   
}

四 在js頁面接受然會值,並在頁面上現實

 

  //HttpRequest回調函數
    function callback()
    {
   
      if(xmlHttp.readyState==4)
      {
       if(xmlHttp.status==200)
         {  
//          try
//           {
//     
//            var isOK= xmlHttp.responsetext.split('/');
//            if(isOK[0]=='yes')
//            {          
//                document.getElementById("txtRoomID").value=isOK[1];
//            }
               if(xmlHttp.responsetext.length>0 )
               {
                  if(xmlHttp.responsetext!='$#@$')
                  {
                  var StrLen= xmlHttp.responsetext.split('^');
                    // document.getElementById('divTest').innerText=xmlHttp.responsetext;
                    
                     var innerText;
                     innerText="<table border='0' cellpadding='0' cellspacing='0'>";
                     for(var i=0;i<StrLen.length;i++)
                     {
                         innerText+="<tr>";
                         innerText+="<td>";
                         innerText+="  <input id='"+i+"' type='text' onclick='getValue(this);' value='"+StrLen[i]+"' />";
                         innerText+="</td>";
                         innerText+="</tr>";
                     }
                     innerText+="</table>";
                     document.getElementById('divTest').innerHTML=innerText;
              
               }
               else
               {
                document.getElementById('divTest').HtmlText="tte";
                document.getElementById('divTest').style.display="";
               }
        }
        
           
       }
    }
}
function getValue(obj)
{
document.getElementById("txtSearch").value=obj.value;
document.getElementById('divTest').style.display="none";
}------------------------------② 此為js的第另一部分 把 js ①② 放在一個js檔案即可

大功搞成  :