目前好多语言都可以实现Ajax,像Java, .Net等等。其实Ajax的核心内容就是XMLHttpRequest。如果读者XMLHttpRequest不太了解,可以在Google上找找《Dynamic HTML and XML :The XMLHttpRequest Object》这文章,介绍的比较详细,我也就不用对XMLHttpRequest进行过多的说明了。对下面讲解并演示在ASP中使用XMLHttpRequest来进行无刷新效果。
<html>
<head>
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script>![](https://www.cnblogs.com/Images/dot.gif)
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>
//declare a XMLHTTPRequest Object.
function loadHTTP()
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
if (window.ActiveXObject)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
// Microsoft Way
req = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
// Others
req = new XMLHttpRequest();
}
}
//initial it
function InitReq(_url)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
req.open("GET",(url+_url),true);
req.onreadystatechange=HttpHandler;
req.send(null);
}
//handler
function HttpHandler()
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
if(req.readyState==4)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if(req.status==200)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
var tt=document.getElementById("test");
tt.innerHTML=req.responseText;
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else
{alert('error!');}
}
}
<%if request.QueryString("q") <>"" then
response.Write(request.QueryString("q"))
end if
%>
首先我们新建一个ASP页面,只要很简单的代码就可以了:
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
大家可以看到在Head标签里我们声明了几个JS变量,这是为后边写JS作的准备。
然后我们用JS声明一个XMLHTTPRequest对象。
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
TextBox的onblur事件将会触发一个InitReq方法,参数是这个TextBox自己的Value值。
再来看看InitReq方法是什么样的:![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
注意req.onreadystatechange=HttpHandler这一句,它告诉指出了函数HttpHandler是用来处理XMLHttpRequest的onreadystatechange事件的。那么一旦XMLHttpRequest的onreadystatechange被触发,那就将执行用户自定义的函数,当然名字可以随便,并不一定是要HttpHandler。
下边是我自己写的HttpHandler函数:
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
OK,到目前我们的客户端功能就算完成了,只有三个函数,简单吧。呵呵。
这个页面只有一个TextBox文本框,用户可以在里边输入一些字符,当这个文本框失去焦点的时候页面就会有一个request到action.asp这个页面。为方便起见action.asp只是简单的返回用户输入的内容,表示成功收到:![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
到这儿已经全部完工,大家可以试一下,看看在文本框失去焦点以后是否像平常的提交一样会出现一个进度条,然后页面刷新?
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步