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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。