Ajax的经典示例

天绝缘 2009-10-29

展开全文

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") = "";

一、异步调用的程序示例

        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>

二、同步调用程序示例

    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的程序示例

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数据的程序示例

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

            request.send(xml);

            //要执行的程序
        }
    </script>

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/sony87615/archive/2009/08/26/4486480.aspx