导航

XMLHttpRequest简要说明

Posted on 2012-11-30 15:31  eastson  阅读(231)  评论(0)  编辑  收藏  举报

有关于XMLHttpRequest的详细信息可以参阅XMLHttp参考手册。

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>

 

W3C有关XMLHttpRequest 对象的说明：http://www.w3school.com.cn/xml/xml_http.asp