极地银狐.NET

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
目前好多语言都可以实现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标签里我们声明了几个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();
        }

    }

 

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

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

 

注意req.onreadystatechange=HttpHandler这一句,它告诉指出了函数HttpHandler是用来处理XMLHttpRequestonreadystatechange事件的。那么一旦XMLHttpRequestonreadystatechange被触发,那就将执行用户自定义的函数,当然名字可以随便,并不一定是要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!');}
        }

    }

 

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

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

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

posted on 2005-10-27 11:24  极地银狐.NET  阅读(5404)  评论(1编辑  收藏  举报