XMLHttpRequest简要说明

转载

mob604756f4c9c3 2012-07-28 07:56:00

1. 创建XMLHttpRequest对象

所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了XMLHttpRequest对象，老版本的Internet Explorer（IE5和IE6）使用ActiveX 对象：

function createXMLHttpRequest()
{
    var xmlhttp=null;

    if (window.XMLHttpRequest)
    {
        // code for all new browsers
        xmlhttp = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        // code for IE5 and IE6
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    if (xmlhttp == null)
    {
        alert("Your browser does not support XMLHTTP.");
    }

    return xmlhttp;
}

2. 同步还是异步？

XMLHttpRequest的open语法如下：

oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword)

varAsync是一个布尔型，指定此请求是否为异步方式，默认为true。

异步的意思是指脚本会在send() 方法之后继续执行，而不等待来自服务器的响应，当状态改变时会调用onreadystatechange属性指定的回调函数。

同步的意思是指脚本会在send() 方法之后，等待服务器响应返回以后再继续执行。

3. onreadystatechange属性

异步请求时通过onreadystatechange属性指定状态改变时需要回调的函数，通常需要和readyState属性，status属性以及statusText属性一起使用。

readyState属性返回XMLHTTP请求的当前状态，有下面几种值：

0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

1 (初始化) 对象已建立，尚未调用send方法

2 (发送数据) send方法已调用，但是当前的状态及http头未知

3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

4 (完成) 数据接收完毕，此时可以通过通过responseBody和responseText获取完整的回应数据

status属性和statusText属性是标准的HTTP响应代码和响应信息。

function demoMethod2()
{
    xmlhttp = createXMLHttpRequest();
    xmlhttp.onreadystatechange = handleStateChange;
    xmlhttp.open("GET", "http://localhost/xmlhttp/users.xml", true);
    xmlhttp.send();
}

function handleStateChange()
{
    if (xmlhttp.readyState == 4)
    {
        // 4 = "loaded"
        if (xmlhttp.status == 200)
        {
            // 200 = OK
            alert(xmlhttp.responseXML.xml);
        }
        else
        {
            alert("Problem retrieving XML data");
        }
    }
}

一个简单演示XMLHttpRequest的完整例子：

<script language="javascript">

function createXMLHttpRequest()
{
    var xmlhttp=null;

    if (window.XMLHttpRequest)
    {
        // code for all new browsers
        xmlhttp = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        // code for IE5 and IE6
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    if (xmlhttp == null)
    {
        alert("Your browser does not support XMLHTTP.");
    }

    return xmlhttp;
}


var xmlhttp = null;

function demoMethod1()
{
    xmlhttp = createXMLHttpRequest();
    xmlhttp.open("GET", "http://localhost/xmlhttp/users.xml", false);
    xmlhttp.send();
    alert(xmlhttp.responseText);
}

function demoMethod2()
{
    xmlhttp = createXMLHttpRequest();
    xmlhttp.onreadystatechange = handleStateChange;
    xmlhttp.open("GET", "http://localhost/xmlhttp/users.xml", true);
    xmlhttp.send();
}

function handleStateChange()
{
    appendStatusDiv("readyStatus = " + xmlhttp.readyState);
    if (xmlhttp.readyState == 4)
    {
        // 4 = "loaded"
        if (xmlhttp.status == 200)
        {
            // 200 = OK
            alert(xmlhttp.responseXML.xml);
        }
        else
        {
            alert("Problem retrieving XML data");
        }
    }
}

function clearStatusDiv()
{
    document.getElementById('statusDiv').innerHTML = "";
}

function appendStatusDiv(text)
{
    document.getElementById('statusDiv').innerHTML = document.getElementById('statusDiv').innerHTML + "<br />" + text;
}

</script>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head>
<body>

<div id="statusDiv" style="border:1px solid #000000;">&nbsp;</div><br />

<a href="javascript:clearStatusDiv(); demoMethod1();">同步调用XMLHttp，显示服务器文件users.xml</a><br />
<a href="javascript:clearStatusDiv(); demoMethod2();">异步调用XMLHttp，显示服务器文件users.xml</a><br />

</body>
</html>