字典!AJAX?

今天同事给看了一个比较有意思的网站 www.objectGraph.com 全E文看不懂！不太明白是做什么的,里面有一个 AJAX Dictionary 比较有意思，并且有讲解其机制，自己动手做了一下效果不错呵呵!
下面就是关键代码：

ASP.net page

<% @Page Language = " C# " %>
<% @Import Namespace = " System.Data " %>
<% @Import Namespace = " System.Data.SqlClient " %>
<% @Import Namespace = " System.Configuration " %>

< script runat = " server " >

     public   void  Page_Load( object  sender,EventArgs args)
     {
        string keyword=Request["k"];
        if(keyword!=null && keyword.Trim()!="")
        {
            string sql="select top 10* from WordList where word like '"+keyword.Trim().Replace("'","''")+"%'";
            SqlConnection conn=new SqlConnection(ConfigurationSettings.AppSettings["connectionString"]);
            conn.Open();
            DataTable dt=new DataTable();
            SqlCommand command=new SqlCommand(sql,conn);
            SqlDataAdapter adapter=new SqlDataAdapter(command);
            adapter.Fill(dt);
            conn.Close();

            foreach(DataRow row in dt.Rows)
            {
                string meaning=row["Meaning"].ToString();
                Response.Write("<strong>"+row["Word"].ToString()+"</strong> <i>");
                  Response.Write("row["Type"].ToString()+"</i>: "+meaning+"<br>");
            }
        }


    }

</ script >

XMLHttpRequest object in the HTML page

< html >
     < head >
         < script >
var  req;

function  Initialize()
{
    try
    {
        req=new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e)
    {
        try
        {
            req=new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(oc)
        {
            req=null;
        }
    }

    if(!req&&typeof XMLHttpRequest!="undefined")
    {
        req= new
    XMLHttpRequest();

}

}   function
SendQuery(key)
     {
    Initialize(); varurl="http://www.objectgraph.com/dictionary/dict.aspx?k="+key;

    if(req!=null)
    {
        req.onreadystatechange = Process;
        req.open("GET", url, true);
        req.send(null);

    }

}

function  Process()
{
    if (req.readyState == 4)
        {
        // only if "OK"
            if (req.status == 200)
            {
                if(req.responseText=="")
                    HideDiv("autocomplete");
                else
                {
                    ShowDiv("autocomplete");
                    document.getElementById("autocomplete").innerHTML =req.responseText;
                }
            }
            else
            {
                document.getElementById("autocomplete").innerHTML=
                    "There was a problem retrieving data:<br>"+req.statusText;
            }
        }
}

function  ShowDiv(divid)
{
   if (document.layers) document.layers[divid].visibility="show";
   else document.getElementById(divid).style.visibility="visible";
}

function  HideDiv(divid)
{
   if (document.layers) document.layers[divid].visibility="hide";
   else document.getElementById(divid).style.visibility="hidden";
}

function  BodyLoad()
{
    HideDiv("autocomplete");
    document.form1.keyword.focus();

}
</ script >
     </ head >
     < body onload = " BodyLoad(); " >
         < form name = " form1 " >
         < input name = " keyword "  onKeyUp = " SendQuery(this.value) "  style = " WIDTH:500px "  autocomplete = " off " >
             < div align = " left "  class = " box "  id = " autocomplete "  style = " WIDTH:500px;BACKGROUND-COLOR:#ccccff " ></ div >
         </ form >

     </ body >
</ html >

详细请见: http://www.objectgraph.com/dictionary/how.html

转载于:https://www.cnblogs.com/orin-chan/archive/2006/02/25/337559.html