zoukankan      html  css  js  c++  java
  • 几种创建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对象,有得话直接返回。没有的话检测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>
  • 相关阅读:
    【Coreforces 1253E】
    计数专题乱做
    PKUWC2020乱做
    多项式板子
    notepad
    2021.4.9
    2021.4.8
    2021.3.31
    2021.3.26
    2021.3.25
  • 原文地址:https://www.cnblogs.com/manfredHu/p/4593810.html
Copyright © 2011-2022 走看看