几种建立XMLHttpRequest对象的方法

时间 2019-11-24

标签几种建立 xmlhttprequest 对象方法繁體版

原文原文链接

XMLHttpRequest对象，也就是Ajax交互的核心对象。javascript

这里列举三种建立Ajax对象的方法。html

第一种：java

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="author" content="manfredHu">
    <meta name="website" content="http://www.cnblogs.com/manfredHu/">
</head>

<body>
    <script type="text/javascript">
    //IE8-中建立XHR对象的第一种方法
    function getXHR() {
        if (window.XMLHttpRequest) {
            return new XMLHttpRequest();
        } else {
            window.XMLHttpRequest = function() {
                try {
                    return new ActiveXObject("Msxml2.XMLHTTP.6.0");
                } catch (e1) {
                    try {
                        return new ActiveXObject("Msxml2.XMLHTTP.3.0");
                    } catch (e2) {
                        throw new Error("XMLHttpRequest is not supported");
                    }
                }
            }
        }
    }
    var XHR = getXHR();
    console.log(XHR);
    </script>
</body>

</html>

第一种第一个是判断window.XMLHttpRequest对象是否存在，存在则返回。不存在则检测IE浏览器的ActiveObject各个版本的不一样对象。总的来讲这种写法try和catch嵌套不少。看着有点晕web

第二种：ajax

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="author" content="manfredHu">
    <meta name="website" content="http://www.cnblogs.com/manfredHu/">
</head>

<body>
    <script type="text/javascript">
    //IE8-中建立XHR对象的第二种方法
    function getxhr() {
        var xmlhttp;
        if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else { // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        console.log(xmlhttp);
    }
    var XHR = getxhr();
    console.log(XHR);
    </script>
</body>

</html>

第二种方法是W3School上面的方法，看起来很简洁，可是没有版本检测。在IE6下能够正常运行！低版本IE5-没有测过不知道，可是也是不推荐的写法。新版本跟老版本的IE在不一样版本对XHR对象的处理不太同样，项目中仍是推荐要写入版本号。chrome

第三种：数组

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="author" content="manfredHu">
    <meta name="website" content="http://www.cnblogs.com/manfredHu/">
</head>

<body>
    <script type="text/javascript">
    //IE8-中建立XHR对象的第三种方法
    function createXHR() {
        if (typeof XMLHttpRequest != "undefined") {
            return new XMLHttpRequest(); //IE7+和其余浏览器支持的
        } else if (typeof ActiveXObject != "undefined") { //IE7-支持的
            if (typeof arguments.callee.activeXString != "string") {
                var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
                    i, len;
                for (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); //返回ActiveXObject对象
        } else { //所有不支持，抛出错误
            throw new Error("don't support XMLHttpRequest");
        }
    }
    var XHR = createXHR();
    console.log(XHR);
    </script>
</body>

</html>

第三种是来自Professional JavaScript for Web中文名《JavaScript高级程序设计（第3版）》这本书而后通过本身修改理解获得的。首先判断有没有支持XMLHttpRequest对象，有得话直接返回。没有的话检测IE的ActiveObject对象是否存在，存在则循环建立一个由新到老的版本号做为参数的对象，若是有错误则跳过错误继续建立低级的版本。有一步要注意，就是第一次运行的时候将函数的activeXString对象缓存为已经测试完毕的versions[i]版本参数，而后在第二次就不会执行if里面的东西，直接到return new ActiveXObject(argument.callee.activeXString)这句。这种写法是比较推荐的，逻辑比较清晰。并且没有像第一种那样用N个try和catch嵌套建立，而是经过数组和for循环建立。大师果真写的代码就是不同，很严谨和扩展性很好的代码写法。浏览器

第四种是double Net提议的用惰性函数的写法缓存

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>第四种建立方法</title>
    <meta name="author" content="double Net">
</head>

<body>
    <script type="text/javascript">
    var XHR = function() {
        //将浏览器支持的AJAX对象放入一个function中，而且根据固定的顺序放到一个队列里。
        for (var AJAXObj = [function() {
                return new XMLHttpRequest
            }, function() {
                return new ActiveXObject("Msxml2.XMLHTTP")
            }, function() {
                return new ActiveXObject("Msxml3.XMLHTTP")
            }, function() {
                return new ActiveXObject("Microsoft.XMLHTTP")
            }], val = null, index = 0; index < AJAXObj.length; index++) {
            //此方法的核心，若是当前浏览器支持此对象就用val保存起来，用保存当前最适合ajax对象的function替换XHR方法，而且结束该循环。这样第二次执行XHR方法时就不须要循环，直接就能获得当前浏览器最适ajax对象。若是都不支持就抛出自定义引用错误。
            try {
                val = AJAXObj[index]()
            } catch (b) {
                continue
            }
            //假设当前浏览器为标准浏览器，此处执行完毕以后console.log(XHR);
            //结果为：function () {
            //  return new XMLHttpRequest
            //};XHR成功替换。
            XHR = AJAXObj[index];
            break
        }
        if (!val) {
            throw new ReferenceError("XMLHttpRequest is not supported")
        }
        return val;
    };
    var xmlObj = XHR();
    console.log(xmlObj);
    </script>
</body>

</html>

孤陋寡闻，了解了一下什么叫惰性函数，也谢谢double Net这位朋友的提醒 :)函数

惰性载入表示函数执行的分支只会在函数第一次掉用的时候执行，在第一次调用过程当中，该函数会被覆盖为另外一个按照合适方式执行的函数，这样任何对原函数的调用就不用再通过执行的分支了。

确实第三种代码没有考虑到惰性函数的优势的那部分，便是一次检测以后重写构造方法。

虽然看到这里我对与建立XHR对象的方法已经以为够完美了，可是感受上面的代码也不是个人菜，for里面嵌套好多代码，跟本身的代码习惯不太符合（有点处女座了请原谅^_^。。。）

第五种方法是后面才发现的

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>第五种建立方法</title>
</head>

<body>
    <script type="text/javascript">
    function createXHR() {
        if (typeof XMLHttpRequest != "undefined") {
            //在第一次执行的时候重写createXHR函数
            createXHR = function() {
                return new XMLHttpRequest();
            };

        } else if (typeof ActiveXObject != "undefined") {

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

                }
                return new ActiveXObject(arguments.callee.activeXString);
            };

        } else {

            createXHR = function() {
                throw new Error("No XHR object available.");
            };

        }
        return createXHR();
    }

    var XHR = createXHR();
    alert(XHR);
    </script>
</body>

</html>