JavaScript Ajax与Comet——“XMLHttpRequest对象”的注重要点

在IE5中,XHR对象是经由历程MSXML库中的ActiveX对象完成的。在IE中可能会碰到三种差别版本的XHR对象,即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0和MXSML.XMLHttp.6.0。

适用于IE7之前的浏览器的代码:

function createXHR() {
    if (typeof arguments.callee.activeXString != "string") {
        var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
            i, len;
        for (var i = 0, len = versions.length; i < len; i++) {
            try {
                new ActiveXObject(versions[i]);
                arguments.callee.activeXString = versions[i];
                break;
            } catch (e) {
                //
            }
        }
    }
    return new ActiveXObject(arguments.callee.activeXString);
}

IE7以后的版本和其他浏览器都邑运用下面的函数来建立:

var xhr = new XMLHttpRequest();

兼容代码:

function createXHR() {
    if (typeof XMLHttpRequest != "undefined") {
        return new XMLHttpRequest();
    } else if (typeof ActiveXObject != "undefined") {
        if (typeof arguments.callee.activeXString != "string") {
            var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
                i, len;
            for (var i = 0, len = versions.length; i < len; i++) {
                try {
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                } catch (e) {
                    //
                }
            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    } else {
        throw new Error("No XHR Object available.");
    }
}

兼容代码的运用:

var xhr = new createXHR();

XHR的用法

在运用XHR对象时,要挪用的第一要领时

  • open(),它吸收三个参数:要发送要求的范例,要求的URL和示意是不是异步发送要求的布尔值。

如:

xhr.open("get", "note.txt", false);

open()示意启动一个要求以备发送,send()要领才是真正的发送;

要发送特定的要求,要向下面一样挪用

  • send()要领:

如:

xhr.open("get", "note.txt", false);
xhr.send(null);

XHR从服务器返回后,发生变化的属性,即保留服务器相应数据的属性为:

  • responseText:作为相应主体被返回的文本

  • responseXML:假如相应范例是”text/xml”和”application/xml”,则保留着相应数据的XML DOM文档

  • status:相应的HTTP状况

  • statusText:HTTP状况的申明

一般来说,可以将HTTP状况吗为200作为胜利标志,此时responseText属性内容准备就绪,responseXML也应当可以接见。别的状况吗为304示意要求的资本没有被修正,可以直接运用浏览器中缓存的版本。

完全代码以下:

var xhr = new XMLHttpRequest();

xhr.open("get", "note.txt", false);
xhr.send(null);

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
    document.write(xhr.responseText);
} else {
    alert("Request was unsuccessful: " + xhr.status);
}

要注意的是:

我们在多半情况下都要发送异步要求的,才能让js继承实行而没必要守候相应。

可以检测XHR对象的readyState属性,该属性示意要求/相应历程的当前运动阶段。这个属性可取的值以下:

  • 0:未初始化。还没有挪用open();

  • 1:启动。已挪用open()但未挪用send();

  • 2:发送。已挪用send()但还没有吸收到相应;

  • 3:吸收。已吸收到部份相应数据;

  • 4:完成。已吸收到悉数相应数据,而且可以在客户端中运用;

详细花样以下:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) {
            //......
        }
    }
};
xhr.open("get", "user.json", true);
xhr.send();

举个例子:

json文件:

[{
    "name": "oliver",
    "age": 18,
    "user": true
}, {
    "name": "troy",
    "age": 26,
    "user": true
}]

dom:

<pre id="pre"></pre>
<button id="btn">insert</button>

js:

var btn = document.getElementById("btn"),
    pre = document.getElementById("pre"),
    obj = null;

btn.onclick = function() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) {
                console.log(xhr.responseText);
                obj = JSON.parse(xhr.responseText);
                pre.innerHTML = obj[1].name; //troy
            }
        }
    };
    xhr.open("get", "user.json", true);
    xhr.send();
};

当点击btn时,pre部份显现猎取的json文件中的部份信息。

别的在吸收到相应之前还可以挪用

  • abort()要领来作废异步要求。

以下所示:


xhr.abort();

在停止要求以后,还应当对XHR对象举行解援用操纵。因为内存缘由,不发起重用XHR对象。

HTTP头部信息

XHR对象供应了操纵要求头部和相应头部信息的要领。 在默许情况下,在发送XHR要求同时,还会发送以下头部信息:

  • Accept: 浏览器可以处置惩罚的内容范例

  • Accept – Charset: 浏览器可以显现的字符集

  • Accept – Encoding: 浏览器可以处置惩罚的紧缩编码

  • Accept – Language: 浏览器当前设置的言语

  • Connection: 浏览器与服务器之间衔接的范例

  • Cookie: 当前页面设置的任何Cookie

  • Host: 发送要求的页面地点的域

  • Referer: 发送要求的页面的URI

  • User – Agent: 浏览器的用户代办字符串

运用

  • setRequestHeader()要领可以设置自定义的要求头部信息。

这个要领吸收两个参数: 头部字段名和头部字段值。 要胜利发送要求头部信息, 必须在挪用open() 要领以后且send() 要领之前挪用它。 发起运用自定义的头部称号。如:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) {
            //......
        }
    }
};
xhr.open("get", "user.json", true);
xhr.setRequestHeader("MyHeader", "MyValue"); //这里定义
xhr.send();

别的,挪用XHR对象的getResponseHeader()要领传入头部字段称号,可以获得相应的相应头部信息。而挪用getAllResponseHeaders()要领则可以获得一个包括一切头部信息的长字符串:

var myHeader = xhr.getResponseHeader("MyHeader");
var allHeaders = xhr.getAllResponseHeaders();

GET要求

用encodeURIComponent()编码后的花样以下:

xhr.open("get", "example.php?name1=value1&name2=value2", true);

下面的函数可以辅佐向现有的URL的末端增加查询字符串参数:

function addURLParam(url, name, value) {
    url += (url.indexOf("?") == -1 ? "?" : "&"); //搜检URL是不是包括问号(以肯定是不是已有参数存在),没有就加上问好,不然增加一个和号
    url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
    return url;
}

举个例子:

var url = "example.php";
url = addURLParam(url, "name", "oli");
url = addURLParam(url, "book", "js");
xhr.open("get", url, false);

POST要求

POST要求一般用于向服务器发送应当保留的数据

运用post提交,要设置头部属性Content-type。假如不设置,会涌现数据没法解码和猎取等题目。

    原文作者:JS菌
    原文地址: https://segmentfault.com/a/1190000004485194
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞