原生js實現Ajax

lily_wang 發布于2019-08-22 18:40 / 513人閱讀

摘要：對象通過實現是第一個引入對象的瀏覽器中對象是通過庫中的一個對象實現的中可能會遇到種不同版本的對象，即適用于之前的版本通過構造函數和都支持原生對象生成對象的方法支持之前的版本對象的屬性表示請求響應過程的當前活動階段值變化將觸發事件，利用該事件

XMLHttpRequest對象


通過ActiveXObject實現（）

new ActiveXObject("Microsoft.XMLHTTP")
IE5是第一個引入XMLHttpRequest對象的瀏覽器；
IE5中,XHR對象是通過MSXML庫中的一個ActiveX對象實現的；
IE中可能會遇到3種不同版本的XHR對象，即 MSXML2.XMLHttp.6.0, MSXML2.XMLHttp.3.0, MSXML2.XMLHttp；
適用于IE7之前的版本



通過XMLHttpRequest構造函數

var xhr = new XMLHttpRequest();
IE7+、FireFox、Opera、Chrome和Safari都支持原生XMLHttpRequest對象；

生成XMLHttpRequest對象的方法

function createXHR() {
    if (typeof XMLHttpRequest !== "undefined") {
        return new XMLHttpRequest();
    } else if (typeof ActiveXObject !== "undefined"){
        // 支持IE7之前的版本
        if (typeof arguments.callee.activeXString !== "string") {
            var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"];
            for (var i = 0; i < versions.length; i++) {
                try {
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                } catch (e) {
                    //
                }
            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    } else {
        throw new Error("No XHR Object available!");
    }
}

XHR對象的readyState屬性

readyState 表示請求/響應過程的當前活動階段；

readyState值變化將觸發readystatechange事件，利用該事件檢測每次狀態變化后的readyState值；

通常只對readyState值為4的階段感興趣，此時所有數據已就緒；

為了確保跨瀏覽器兼容性，必須在調用open()之前指定readystatechange事件處理程序；

readyState屬性取值：

值	階段	說明
0	未初始化	還沒有調用 open() 方法
1	啟動	已調用 send() 方法，正在發送請求
2	發送	send() 方法完成，已收到全部響應內容
3	接收	正在解析響應內容
4	完成	響應內容解析完成，可以在客戶端調用

XHR對象收到響應后添加的屬性

屬性	說明
responseText	作為響應主體被返回的文本；
responseXML	若響應內容類型是"text/xml"或"application/xml", 其值包含著響應數據的XML DOM文檔；對于非XML數據而言，responseXML值為null
status	響應的HTTP狀態
statusText	HTTP狀態的說明

封裝AJAX方法

/**
 *
 * @param type 請求類型：get,post,...
 * @param url
 * @param dataObj 請求參數：對象字面量{key:value,...}
 * @param callback
 * @param async 是否異步
 */

function ajax(type, url, dataObj, callback, async) {
    var paramsStr = buildParamsStr(dataObj), xhr = null;
    if (type === "get" && dataObj) {
        url = addURLParams(url, paramsStr);
    }
    xhr = createXHR();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            var status = xhr.status;
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                console.log(xhr.responseText);
                callback && callback(xhr.responseText);
            } else {
                console.log("請求異常！狀態碼：" + xhr.status);
            }
        }
    };
    xhr.open(type, url, async); // open()方法啟動一個請求以備發送；
    if (type == "get") {
        xhr.send(null);
    } else {
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=UTF-8");
        xhr.send(paramsStr);
    }
}

encodeURIComponent()方法

GET請求經常發生查詢字符串格式引發的錯誤；

可以對查詢字符串中每個參數的名稱和值用encdoeURIComponent()進行編碼；

function buildParamsStr(paramsObj){
    var str = "";
    for (key in paramsObj) {
        // 排除原型中屬性
        if (dataObj.hasOwnProperty(key)) {
            // 對查詢字符串中每個參數名稱和值用encdoeURIComponent()進行編碼
            str += "&" + encodeURIComponent(key) + "=" + encodeURIComponent(paramsObj[key]);
        }
    }
    return str.slice(1);
}

function addURLParams(url, paramsStr) {
    url += (url.indexOf("?") === -1) ? "?" : "&";
    url += paramsStr + "&" + new Date().getTime();
    return url;
}

調用示例

window.onload = function(){
    var btn = document.getElementById("btn1");
    btn.onclick = function(){
        ajax("get", "a.txt", function fnSucc(str){
            alert(str)
        });
    }
}

GPU云服務器云服務器 ajax原生js實現原生js實現ajax 原生js封裝ajax 原生js實現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96078.html

原生JS與jQuery對AJAX的實現

摘要：原生與對的實現一定義里這么解釋異步的和。二原生實現所有現代瀏覽器以及均內建對象。一般是正常未找到頁面，一般是錯誤，或者后臺沒有創建相應的內部服務錯誤，多為后臺錯誤。基本上通過發送的數據及傳回的數據就能定位問題所在了。原生JS與jQuery對AJAX的實現一、定義 W3C里這么解釋AJAX： AJAX = Asynchronous JavaScript and XML（異步的 Jav...

Chaz 2019-08-21 10:37 評論0 收藏0
原生JS封裝AJAX請求

摘要：一直在用方法來寫請求，用的多了，不免對這其中是怎么實現的產生了興趣，于是乎，小弟閑來無聊研究了一下原生實現請求，網上看了很多前輩們的關于請求的封裝方法，也借鑒了很多經驗，于是乎就出現了小弟的一個原生封裝的版本，希望大家看了之后能夠明白，下面一直在用jQuery方法來寫ajax請求，用的多了，不免對這其中是怎么實現的產生了興趣，于是乎，小弟閑來無聊研究了一下原生實現ajax請求，網上看...

newsning 2019-08-02 15:56 評論0 收藏0
原生JS封裝AJAX請求

摘要：一直在用方法來寫請求，用的多了，不免對這其中是怎么實現的產生了興趣，于是乎，小弟閑來無聊研究了一下原生實現請求，網上看了很多前輩們的關于請求的封裝方法，也借鑒了很多經驗，于是乎就出現了小弟的一個原生封裝的版本，希望大家看了之后能夠明白，下面一直在用jQuery方法來寫ajax請求，用的多了，不免對這其中是怎么實現的產生了興趣，于是乎，小弟閑來無聊研究了一下原生實現ajax請求，網上看...

hiyang 2019-08-30 13:08 評論0 收藏0
原生JS封裝AJAX請求

摘要：一直在用方法來寫請求，用的多了，不免對這其中是怎么實現的產生了興趣，于是乎，小弟閑來無聊研究了一下原生實現請求，網上看了很多前輩們的關于請求的封裝方法，也借鑒了很多經驗，于是乎就出現了小弟的一個原生封裝的版本，希望大家看了之后能夠明白，下面一直在用jQuery方法來寫ajax請求，用的多了，不免對這其中是怎么實現的產生了興趣，于是乎，小弟閑來無聊研究了一下原生實現ajax請求，網上看...

Travis 2019-08-20 12:33 評論0 收藏0
原生js實現ajax及get post方法

摘要：使用過的同學，應該對事件綁定方法有一定的了解。實現方式以下為個人類庫中實現方式。代碼中使用到一個基礎方法對象，該對象為的基礎類。如果想了解更多，可以通過點擊進入查看原碼。使用過jQuery的同學，應該對事件綁定方法ajax有一定的了解。在個人類庫jTool 中實現了這個方法，這里就來細說下原生實現方式。實現方式以下為個人類庫jTool 中 Ajax 實現方式。代碼中使用到一個基...

pkhope 2019-08-26 13:54 評論0 收藏0