zoukankan      html  css  js  c++  java
  • XMLHttpRequest简要说明

    有关于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

  • 相关阅读:
    Windows下分布式缓存Memcached参数帮助文档
    十条不错的编程观点
    转载志凡:网站技术分析报告之——开心网(kaixin.com)
    转载:由图片SEO想起
    Memcache基础教程
    【C#学习笔记】构造函数重载,构造函数相互调用,静态构造函数
    【C#学习笔记】单精度和双精度浮点型操作留意。
    VB进行子类化
    通过 Apache 配置 Rewrite 支持 .htaccess
    【C#学习笔记】各种定义方法的例子
  • 原文地址:https://www.cnblogs.com/eastson/p/2612730.html
Copyright © 2011-2022 走看看