成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

原生js實現(xiàn)Ajax

lily_wang / 520人閱讀

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

XMLHttpRequest對象 


通過ActiveXObject實現(xiàn)（）



new ActiveXObject("Microsoft.XMLHTTP")


IE5是第一個引入XMLHttpRequest對象的瀏覽器；


IE5中,XHR對象是通過MSXML庫中的一個ActiveX對象實現(xiàn)的；


IE中可能會遇到3種不同版本的XHR對象，即 MSXML2.XMLHttp.6.0, MSXML2.XMLHttp.3.0, MSXML2.XMLHttp；


適用于IE7之前的版本







通過XMLHttpRequest構(gòu)造函數(shù)



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 表示請求/響應(yīng)過程的當前活動階段；



readyState值變化將觸發(fā)readystatechange事件，利用該事件檢測每次狀態(tài)變化后的readyState值；


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



為了確?？鐬g覽器兼容性，必須在調(diào)用open()之前指定readystatechange事件處理程序；
readyState屬性取值：
值 階段 說明
0 未初始化 還沒有調(diào)用 open() 方法
1 啟動 已調(diào)用 send() 方法，正在發(fā)送請求
2 發(fā)送 send() 方法完成，已收到全部響應(yīng)內(nèi)容
3 接收 正在解析響應(yīng)內(nèi)容
4 完成 響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用
XHR對象收到響應(yīng)后添加的屬性
屬性 說明
responseText 作為響應(yīng)主體被返回的文本；
responseXML 若響應(yīng)內(nèi)容類型是"text/xml"或"application/xml", 其值包含著響應(yīng)數(shù)據(jù)的XML DOM文檔；
對于非XML數(shù)據(jù)而言，responseXML值為null
status 響應(yīng)的HTTP狀態(tài)
statusText HTTP狀態(tài)的說明
封裝AJAX方法 
/**
 *
 * @param type 請求類型：get,post,...
 * @param url
 * @param dataObj 請求參數(shù)：對象字面量{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("請求異常！狀態(tài)碼：" + xhr.status);
            }
        }
    };
    xhr.open(type, url, async); // open()方法啟動一個請求以備發(fā)送；
    if (type == "get") {
        xhr.send(null);
    } else {
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=UTF-8");
        xhr.send(paramsStr);
    }
}
encodeURIComponent()方法 

GET請求經(jīng)常發(fā)生查詢字符串格式引發(fā)的錯誤；


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


function buildParamsStr(paramsObj){
    var str = "";
    for (key in paramsObj) {
        // 排除原型中屬性
        if (dataObj.hasOwnProperty(key)) {
            // 對查詢字符串中每個參數(shù)名稱和值用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;
}
調(diào)用示例 
window.onload = function(){
    var btn = document.getElementById("btn1");
    btn.onclick = function(){
        ajax("get", "a.txt", function fnSucc(str){
            alert(str)
        });
    }
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96078.html

相關(guān)文章

  • 原生JS與jQuery對AJAX的實現(xiàn)

    摘要：原生與對的實現(xiàn)一定義里這么解釋異步的和。二原生實現(xiàn)所有現(xiàn)代瀏覽器以及均內(nèi)建對象。一般是正常未找到頁面，一般是錯誤，或者后臺沒有創(chuàng)建相應(yīng)的內(nèi)部服務(wù)錯誤，多為后臺錯誤?；旧贤ㄟ^發(fā)送的數(shù)據(jù)及傳回的數(shù)據(jù)就能定位問題所在了。 原生JS與jQuery對AJAX的實現(xiàn) 一、定義 W3C里這么解釋AJAX： AJAX = Asynchronous JavaScript and XML（異步的 Jav...

    Chaz 評論0 收藏0

  • 原生JS封裝AJAX請求

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

    newsning 評論0 收藏0

  • 原生JS封裝AJAX請求

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

    hiyang 評論0 收藏0

  • 原生JS封裝AJAX請求

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

    Travis 評論0 收藏0

  • 原生js實現(xiàn)ajax及get post方法

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

    pkhope 評論0 收藏0

發(fā)表評論

0條評論

lily_wang

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<