幾種創建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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM