字典!AJAX?
2006-02-25 15:17 Orin 阅读(357) 评论(0) 编辑 收藏 举报今天同事给看了一个比较有意思的网站 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>
<%@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>
<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