基本原理其实很简单，就是通过XMLHttpRequest把文本输入框内输入的内容传送给后台处理页面,后台处理完之后通过回调函数取得值,然后再把值输出在信息提示层上。以下代码做了些简化，大家明白原理就可以自由发挥了。
1：前台页面index.html
<html>
<head>
<script language="javascript" src="serch.js"></script><!--调用JS文件-->
</head>
<body>
<form action="">
<input name="title" type="text" onkeyup="show(document.getElementById('title').value)" ><!--定义一个文本框，用于输入数据，并通过键盘弹起事件调用函数show。document.getElementById('title').value用户取出文本框的值传到函数show（）>
</form>
<div id="showcon" style="width:100px;height:100px;color:red"></div><!--定义一个显示层，用于显示回调的数据-->
</body>
</html>
2：serch.js
// 声明xmlHttpRequest对象
var xmlHttp;
function createxmlHttp()
{
if(window.xmlHttpRequest)
{
xmlHttp=new xmlHttpRequest();//mozilla浏览器
}
else if(window.ActiveXObject)
{
try
{
xmlHttp=new ActiveXObject("Msxml2.xmlHttp");//IE老版本
}
catch(e)
{}
try
{
xmlHttp=new ActiveXObject("Microsoft.xmlHttp");//ie新版本
}
catch(e)
{}
if(!xmlHttp)
{
window.alert("xmlHttpRequest对象创建失败!")
return false;
}
}
}
function show(strtitle)
{
content=document.getElementById("showcon")//获得用于显示回调内容的DIV的ID
if (strtitle!="")
{ //判断文本输入框是否有值输入
createxmlHttp(); //调用xmlHttpRequest对象建立函数
xmlHttp.onreadystatechange=show_title; //回调函数是show_title
//调用URL为带参数的ASP（任何动态页面）页面,该页面接收文本框输入值,从数据库内取出相对应的所有提示记录
url="reserch.asp?title="+escape(strtitle);
//特别注意：URL后边的参数strtitle如果 是英文和数字，程序执行没有任何问题的，不过如果是中文时，结果就不一样了、要么JS报错、要么没有返回值、要么很正常，网上查了下资料，把参数值经过 js内部函数escape()加密,就没问题了，关于escape()的用法，大家可以BAIDU以下。
xmlHttp.open("POST",url,true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=gb2312');
//特别注意：上边的中文出错的问题解决了，但你会发 现，返回的中文居然会显示乱码，这个时候就牵涉到中文兼容的问题了。解决方法分两种情况：1、当传值方式是POST时（如同本例），就需要加上 xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=gb2312')；2、当传值方式是GET时，大家就需要在传 递的页面中加上response.charset="gb2312" '或response.charset="GBK"，不同的语言有不同的写法，大 家可以查资料。
xmlHttp.send(null);
}
else {
content.innerHTML="";
}
}
function show_title()
{
if (xmlHttp.readyState==4){
if (xmlHttp.status==200){
recontent=xmlHttp.responseText; //取得页面返回的值
show_con=document.getElementById("showcon");
if (recontent!=""){
show_con.innerHTML=recontent;
}
else show_con.innerHTML="";
}
}
}
3：reserch.asp
这就是处理页面，到这里大家就可以自由发挥了
<%
strtitle=request.QueryString("title")
response.Write strtitle
%>
此段ASP代码就是简单的显示文本框输入的内容。大家在这里就可以通过参数访问数据库，实现用户名的检测、数据搜索等功能，只需要把内容Response,write就OK了，大家可以自由想象自由发挥了。
友情提示：如果是使用ASP.NET的朋友需要注意了：
你可能会遇到“验证视图MAC失败”的错误（因为我就遇到了，嘿嘿）。如果此引用程序由网络场或群集 承载，请确保<machineKey>配置指定了相同的 validationKey 和验证算法。不能在群集中使用 AutoGenerateP>
原因：表格，指定了DataKeyNames属性，则出于安全的理由（因为DataKeyNames指定的字段代表数据的主键，且该主键值需要保存在视图 状态中发送到客户端，用户如果篡改主键值，会导致安全问题），GridView会要求加密视图状态。为此会自动在页面表单</forms>之 前添加一个<input type="hidden" name="__VIEWSTATEENCRYPTED" id="__VIEWSTATEENCRYPTED" value="" /> 。
当UpdatePanel更新时，UpdatePanel内部的控件被提交到服务器进行处理（Patrial Rendering），而整个页面并没有被提交。也就是说隐藏的input控件没有随着一起提交。因此服务器并不知道提交的ViewState被加密了， 从而导致MAC验证错误。
解决方法：
通过在Web.config里边添加
<pages enableEventValidation="false" viewStateEncryptionMode ="Never" />
转自:http://hi.baidu.com/ringbelling/blog/item/d7a3561346fb40045aaf539e.html
