简单的ajax(菜鸟级)

经常有朋友问我,Google,土豆网等那各种辅助输入功能是如何实现...我是用的ajax实现的.描述如下:

一 创建输入页面 包含如下文本框

      <input id="txtSearch" style=" 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文件即可

大功搞成  效果图: