几种创建XMLHttpRequest对象的方法

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

这里列举三种创建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() {

        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嵌套很多。看着有点晕


第二种:

<!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对象的处理不太一样,项目中还是推荐要写入版本号。


第三种:

<!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对象,有得话直接返回。然后检测ActiveObject对象是否存在。创建了一个由高到低的版本号序列,并且循环创建,如果有错误则跳过错误创建低级的版本。这种写法是比较推荐的,逻辑比较清晰。而且没有像第一种那样用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>

    <meta name="author" content="double Net">

</head>



<body>

    <script type="text/javascript">

    function createXHR() {

        if (typeof XMLHttpRequest != "undefined") {

            createXHR = function() {

                return new XMLHttpRequest();

            }

            return new XMLHttpRequest();

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

            var curxhr;

            var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];

            for (var i = 0, len = versions.length; i < len; i++) {

                try {

                    var xhr = new ActiveXObject(versions[i]);

                    curxhr = versions[i];

                    createXHR = function() {

                        return new ActiveXObject(curxhr);

                    }

                    return xhr;

                } catch (ex) {

                    //skip

                }

            }

        } else {

            throw new Error("No XHR object available.");

        }

    }

    var XHR = createXHR();

    console.log(XHR);

    </script>

</body>



</html>

 这种是结合惰性函数一次检测到处可用的优点和Professional JavaScript for Web中文名《JavaScript高级程序设计(第3版)》得到的,有兴趣的朋友可以思考一下curxhr = versions[i];这句,为什么要用这句?如果下面是这样写的又会怎么样?

createXHR = function() {   return new ActiveXObject(version[i]); }

你可能感兴趣的:(XMLhttpREquest)