用ASP实现XMLHttpRequest

目前好多语言都可以实现 Ajax ,像 Java, .Net 等等。其实 Ajax 的核心内容就是 XMLHttpRequest 。如果读者 XMLHttpRequest 不太了解,可以在 Google 上找找《 Dynamic HTML and XML The XMLHttpRequest Object 》这文章,介绍的比较详细,我也就不用对 XMLHttpRequest 进行过多的说明了。对下面讲解并演示在 ASP 中使用 XMLHttpRequest 来进行无刷新效果。

首先我们新建一个ASP页面,只要很简单的代码就可以了:

None.gif < html >
None.gif     < head >
ExpandedBlockStart.gifContractedBlock.gif         < script > dot.gif
InBlock.gif            var req=null; 
InBlock.gifvar dom = new ActiveXObject("Microsoft.XMLDOM");
InBlock.gifvar url='http://localhost/ajaxtest/action.asp?q=';
ExpandedBlockEnd.gif        </script>
None.gif    </head>
None.gif<body onload="loadHTTP()">
None.gif        <form action="adtion.asp" name="Form1">
None.gif            <INPUT type="text" ID="Text1" NAME="Text1" 
None.gifonblur="InitReq(this.value)">
None.gif            <DIV id=test></DIV>
None.gif        </form>
None.gif</body>
None.gif
 

大家可以看到在Head标签里我们声明了几个JS变量,这是为后边写JS作的准备。

然后我们用JS声明一个XMLHTTPRequest对象。


None.gif // declare a XMLHTTPRequest Object.
None.gif      function  loadHTTP()
ExpandedBlockStart.gifContractedBlock.gif     dot.gif {
InBlock.gif        if (window.ActiveXObject)
ExpandedSubBlockStart.gifContractedSubBlock.gif        dot.gif{
InBlock.gif        // Microsoft Way
InBlock.gif         req = new ActiveXObject("Microsoft.XMLHTTP");
ExpandedSubBlockEnd.gif        }
InBlock.gif        else if (window.XMLHttpRequest)
ExpandedSubBlockStart.gifContractedSubBlock.gif        dot.gif{
InBlock.gif         // Others
InBlock.gif         req = new XMLHttpRequest();
ExpandedSubBlockEnd.gif        }
ExpandedBlockEnd.gif    }
None.gif
 

TextBoxonblur事件将会触发一个InitReq方法,参数是这个TextBox自己的Value值。

再来看看 InitReq 方法是什么样的:
None.gif // initial it
None.gif      function  InitReq(_url)
ExpandedBlockStart.gifContractedBlock.gif     dot.gif {
InBlock.gif        req.open("GET",(url+_url),true);
InBlock.gif        req.onreadystatechange=HttpHandler;
InBlock.gif        req.send(null);
ExpandedBlockEnd.gif    }
None.gif
 

注意req.onreadystatechange=HttpHandler这一句,它告诉指出了函数HttpHandler是用来处理XMLHttpRequestonreadystatechange事件的。那么一旦XMLHttpRequestonreadystatechange被触发,那就将执行用户自定义的函数,当然名字可以随便,并不一定是要HttpHandler
下边是我自己写的HttpHandler函数:

None.gif // handler
None.gif      function  HttpHandler()
ExpandedBlockStart.gifContractedBlock.gif     dot.gif {
InBlock.gif        if(req.readyState==4)
ExpandedSubBlockStart.gifContractedSubBlock.gif        dot.gif{
InBlock.gif            if(req.status==200)
ExpandedSubBlockStart.gifContractedSubBlock.gif            dot.gif{
InBlock.gif                var tt=document.getElementById("test");
InBlock.gif                tt.innerHTML=req.responseText;
ExpandedSubBlockEnd.gif            }
ExpandedSubBlockStart.gifContractedSubBlock.gif            elsedot.gif{alert('error!');}
ExpandedSubBlockEnd.gif        }
ExpandedBlockEnd.gif    }
None.gif
 

OK,到目前我们的客户端功能就算完成了,只有三个函数,简单吧。呵呵。

这个页面只有一个 TextBox 文本框,用户可以在里边输入一些字符,当这个文本框失去焦点的时候页面就会有一个 requestaction.asp 这个页面。为方便起见 action.asp 只是简单的返回用户输入的内容,表示成功收到:
None.gif < % if  request.QueryString( " q " )  <> ""   then
None.gif        response.Write(request.QueryString( " q " ))
None.gif     end   if
None.gif% >
 

到这儿已经全部完工,大家可以试一下,看看在文本框失去焦点以后是否像平常的提交一样会出现一个进度条,然后页面刷新?

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值