AJAX基本框架:
1:创建XMLHttpRequest对象,用来与服务器访问
http_request = new ActiveXObject("Msxml2.XMLHTTP")
2:指定处理服务器返回的数据的函数
http_request.onreadystatechange = processRequest(自定义函数)
3:定义processRequest函数
4:发送请求
这是一个用户名注册唯一性检查的AJAX例子。
kof 为以注册用户,操作如下:
输入: kof
弹出:
输入: abc
弹出:
DataCheck.html(客户端用户名注册文件)
<html>
<head>
<title>AJAX DataCheck</title>
<Script Language="javascript">
var http_request = false;
// 初始化,指定处理函数,发送请求的函数
function send_request( url )
{
http_request = false;
// 开始初始化XMLHttpRequest对象
if ( window.XMLHttpRequest ) // Mozilla等Browers
{
http_request = new XMLHttpRequest( );
// 设置MiME类别
if ( http_request.overrideMimeType )
{
http_request.overrideMimeType("text/xml");
}
}
else if ( window.ActiveXObject ) // IE Brower
{
try
{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{}
}
}
// 异常,创建对象实例失败
if ( !http_request )
{
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
// 指定处理服务器返回的数据的函数
http_request.onreadystatechange = processRequest;
// 确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open( "GET", url, true );
http_request.send( null );
}
function processRequest()
{
// 判断对象状态,4表示服务器完成数据返回
if ( http_request.readyState == 4 )
{
// 200表示信息已成功返回,开始处理信息
if ( http_request.status == 200 )
{
alert( http_request.responseText );
}
else
{
alert( "你所请求的页面有异常." );
}
}
}
// 客户端检查用户名是否输入
function userCheck()
{
var f = document.form1;
var userName = f.userName.value;
if ( userName == "" )
{
window.alert("用户名不能为空");
f.userName.focus();
return false;
}
else
{
send_request( "http://localhost/AJAX/DataCheckServerTest.aspx?userName=" + userName );
}
}
</Script>
</head>
<body>
<form name="form1" action = "" method = "post">
测试数据: kof 为以注册用户. <br><hr>
用户名:<input type="text" name="userName" value="">
<input type="button" name="check" value="唯一性检查" onClick="userCheck()">
<input type="submit" name="submit" value="提交">
</form>
</body>
</html>
DataCheckServerTest.aspx(服务器处理AJAX请求页面)
<script language="C#" Runat="Server">
void Page_Load( Object Sender, EventArgs e )
{
String userName = Request.QueryString["userName"];
if ( "kof".Equals( userName ) )
{
Response.Write( "用户名已经被注册,请更换一个用户名." );
}
else
{
Response.Write( "用户名尚未被使用,你可以继续." );
}
}
</script>
评论