Ajax的经典示例

来源:web开发    发布日期:2009-6-8    阅读数:

   Ajax(Asynchronous JavaScript and XML),使用户在使用Web程序时,不用在来来回回的Post了,可以近乎实时的从客户端收到服务器返回的信息,而无需刷新,极大的非富了用户的操作体验。
       
         XMLHttpRequest对象是Ajax的核心对象

        不同的浏览器,建立对象的方式不同这里以IE为例
        var request = new ActiveXObject("Microsoft.XMLHTTP")

        XMLHttpRequest对象的方法和属性:

        open(request-type,url,asynch,username,password):建立到服务器的新请求。
        request-type 发送请求的类型:get,post,head
        url 要连接的url
        asynch 可选参数,如使用异步连接为true,如使用同步连接为false,默认值为true
        username 可选参数,如果需要身份验证,则可以在此指定用户名,无可选参数
        password 可选参数,如果需要身份验证,则可以在此指定口令,无可选参数

        send(content):向服务器发送请求。
        content 要发送的内容
 
        abort():退出当前请求。

        readyState:提供当前 HTML 的就绪状态。
        0:请求未初始化
        1:请求已经建立,但是还没有发送(还没有调用 send())
        2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)
        3:请求在处理中,通常响应中已有部分数据可用了
        4:响应已完成

        status:提供当前HTML的状态码
        401:未经授权
        403:禁止访问
        404:没找到访问页
        200:正常

        XMLHttpRequest对象的Head请求

        取得Response的Header
        request.getAllResponseHeaders();
        request.getResponseHeader("Server");
        request.getResponseHeader("Connection");
        request.getResponseHeader("Date");
        request.getResponseHeader("Content-Length");
        request.getResponseHeader("Keep-Alive");
        request.getResponseHeader("X-Cache");
        request.getResponseHeader("Content-Type");   

        设置Request的Header
        request.setRequest("Server") = "";
        request.setRequest("Connection") = "";
        request.setRequest("Date") = "";
        request.setRequest("Content-Length") = "";
        request.setRequest("Keep-Alive") = "";
        request.setRequest("X-Cache") = "";
        equest.setRequest("Content-Type") = "";

        一、异步调用的程序示例
       

<script language="JavaScript">
    
    
var request = new ActiveXObject("Microsoft.XMLHTTP");    //建立XMLHttpRequest对象
    function sendRequest()
    
{
        url 
= "http://test/test.asp?Name=" +    Value;    //设置要发送的Url,发送的值为键值对


        request.open(
"get",url,true);            //调用open方法
        
        request.onreadystatechange 
= showMessage;    //设置服务器要回调的方法

        request.send(null);                //发送
    }

    
    
function showMessage()
    
{
        
if(request.readyState == 4 && request.status == 200
)
        
{
            alert(request.responseText);
        }

    }

</script>

        二、同步调用程序示例
       
<script language="JavaScript">
    
    
var request = new ActiveXObject("Microsoft.XMLHTTP");    //建立XMLHttpRequest对象

    
function sendRequest()
    
{
        url 
= "http://test/test.asp?Name=" +    Value;    //设置要发送的Url,发送的值为键值对


        request.open(
"get",url,false);            //调用open方法
        
                        
        request.send(
null);                //发送

    
        
        alert(request.responseText);
        
    }



</script>


       异步请求程序示例说明:程序首先建立了XMLHttpRequest对象,之后以异步的方法执行请求,onreadystatechange是在请求状态发生改变时,服务器要回调的客端方法,要在send()方法之前设置,在showMessage()方法里,当readState的状态为4且 status为200时,执行操作同步请求与异步请求的差别在于,同步请求时,客户端要行进等待,当服务器处理完请求后再在执行以下的程序,而异步请求不必如此,客户端的程序在请求发出之后就可以继续执行,而不必等待,直到服务器处理后,再回调用onreadystatechange注册的方法。

        三、请求Head的程序示例

<script language="JavaScript">
    
var request = new ActiveXObject("Microsoft.XMLHTTP");    //建立XMLHttpRequest对象
        
    
function
 sendRequest()
    
{
        url 
= "http://test/test.asp";            //要发送的Url


        request.open(
"head",url,true);            //调用open方法

        request.onreadystatechange 
= showMessage;    //设置服务器要回调的方法
        request.send(null);                //发送
    }


    
function showMessage()
    
{
        
if(request.readyState == 4 && request.status == 200
)
        
{
            alert(request.getAllResponseHeaders());    
//取得Header的值

        }

    }


    
</script>

        这个方法与上一个方法的不同之处就在于open()方法的第一个参数是head,我们可以重写showMessage以取得相应的Head值

function showMessage()
    
{
        
if(request.readyState == 4 && request.status == 200
)
        
{
            alert(request.getResponseHeader(
"Server"
));
            alert(request.getResponseHeader(
"Connection"
));
            alert(request.getResponseHeader(
"Date"
));
            alert(request.getResponseHeader(
"Content-Length"
));
            alert(request.getResponseHeader(
"Keep-Alive"
));
            alert(request.getResponseHeader(
"X-Cache"
));
            alert(request.getResponseHeader(
"Content-Type"
));
        }

    }
    

        四、发送XML数据

        XMLHttpRequest对象可向服务器发送XML格式的数据,但这样做会降低程序的响应速度,因为与普通的文本相比,XML格式的数据,要处理更多额外的东西,建议没有必要的情况下,不要使用XML

        发送XML数据的程序示例

<script language="JavaScript">
            
        
var request = new ActiveXObject("Microsoft.XMLHttpRequest");        //建立XMLHttpRequest对象
        
        
function
 sendXmlRequest()
        
{
            xml 
= "";                            //XML数据    

            
            url 
= "http://test/test.asp";                    //设置发送的Url

            
            request.open(
"post",url,false);                    //调用open方法


            request.setRequestHeader(
"Content-Type","text/xml");        //设置发送请求的头
    
            request.send(xml);

            
//要执行的程序    

        }

    
</script>


站内搜索


Copyright;2009-2009 webcenter.hit.edu.cn All Rights Reserved 哈工大网络与信息中心