目前好多语言都可以实现Ajax,像Java, .Net等等。其实Ajax的核心内容就是XMLHttpRequest。如果读者XMLHttpRequest不太了解,可以在Google上找找《Dynamic HTML and XML :The XMLHttpRequest Object》这文章,介绍的比较详细,我也就不用对XMLHttpRequest进行过多的说明了。对下面讲解并演示在ASP中使用XMLHttpRequest来进行无刷新效果。
首先我们新建一个ASP页面,只要很简单的代码就可以了:
<html>
<head>
<script>
var req=null;
var dom = new ActiveXObject("Microsoft.XMLDOM");
var url='http://localhost/ajaxtest/action.asp?q=';
</script>
</head>
<body onload="loadHTTP()">
<form action="adtion.asp" name="Form1">
<INPUT type="text" ID="Text1" NAME="Text1"
onblur="InitReq(this.value)">
<DIV id=test></DIV>
</form>
</body>
<head>
<script>
var req=null;
var dom = new ActiveXObject("Microsoft.XMLDOM");
var url='http://localhost/ajaxtest/action.asp?q=';
</script>
</head>
<body onload="loadHTTP()">
<form action="adtion.asp" name="Form1">
<INPUT type="text" ID="Text1" NAME="Text1"
onblur="InitReq(this.value)">
<DIV id=test></DIV>
</form>
</body>
大家可以看到在Head标签里我们声明了几个JS变量,这是为后边写JS作的准备。
然后我们用JS声明一个XMLHTTPRequest对象。
//declare a XMLHTTPRequest Object.
function loadHTTP()
{
if (window.ActiveXObject)
{
// Microsoft Way
req = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{
// Others
req = new XMLHttpRequest();
}
}
function loadHTTP()
{
if (window.ActiveXObject)
{
// Microsoft Way
req = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{
// Others
req = new XMLHttpRequest();
}
}
TextBox的onblur事件将会触发一个InitReq方法,参数是这个TextBox自己的Value值。
再来看看InitReq方法是什么样的://initial it
function InitReq(_url)
{
req.open("GET",(url+_url),true);
req.onreadystatechange=HttpHandler;
req.send(null);
}
function InitReq(_url)
{
req.open("GET",(url+_url),true);
req.onreadystatechange=HttpHandler;
req.send(null);
}
注意req.onreadystatechange=HttpHandler这一句,它告诉指出了函数HttpHandler是用来处理XMLHttpRequest的onreadystatechange事件的。那么一旦XMLHttpRequest的onreadystatechange被触发,那就将执行用户自定义的函数,当然名字可以随便,并不一定是要HttpHandler。
下边是我自己写的HttpHandler函数:
//handler
function HttpHandler()
{
if(req.readyState==4)
{
if(req.status==200)
{
var tt=document.getElementById("test");
tt.innerHTML=req.responseText;
}
else{alert('error!');}
}
}
function HttpHandler()
{
if(req.readyState==4)
{
if(req.status==200)
{
var tt=document.getElementById("test");
tt.innerHTML=req.responseText;
}
else{alert('error!');}
}
}
OK,到目前我们的客户端功能就算完成了,只有三个函数,简单吧。呵呵。
这个页面只有一个TextBox文本框,用户可以在里边输入一些字符,当这个文本框失去焦点的时候页面就会有一个request到action.asp这个页面。为方便起见action.asp只是简单的返回用户输入的内容,表示成功收到:<%if request.QueryString("q") <>"" then
response.Write(request.QueryString("q"))
end if
%>
response.Write(request.QueryString("q"))
end if
%>
到这儿已经全部完工,大家可以试一下,看看在文本框失去焦点以后是否像平常的提交一样会出现一个进度条,然后页面刷新?