用ES6封裝AJAX函數，支持GET/POST

wangdai 發布于2019-08-26 11:41 / 3012人閱讀

function Ajax({
    type = "GET",
    url = "",
    async = true,
    params = {},
    responseType = "text",
    contentType = "application/x-www-form-urlencoded", //xhr.setRequestHeader("Content-Type",option.contentType); 
    done = () => {},
    fail = () => {}
}) {
    type = type.toUpperCase();
    params = formatParams(params);
    //創建xhr對象 step1
    const xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
    xhr.responseType = responseType;    
    //接收 step3
    xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
            const status = xhr.status;
            if (status >= 200 && status < 300) {
                done(response);
            } else {
                fail(status);
            }
        }
    }
    //發送 step2
    if (type === "GET") {
        xhr.open("GET", url + "?" + params, async);
        xhr.send(null);
    } else if (type === "POST") {
        xhr.open("POST", url, async);
        //設置表單提交時的內容類型
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(params);
    }
}

function formatParams(params) {
    const arr = [];
    for (let name in params) {
        arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(params[name]));
    }
    arr.push(("_=" + Math.random()).replace(".", ""));
    return arr.join("&");
}

云服務器 GPU云服務器 get post 一個封裝的Ajax類原生js封裝ajax js ajax 請求數據封裝

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

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

用Promise解決多個異步Ajax請求導致的代碼嵌套問題

摘要：問題前端小同學在做頁面的時候，犯了個常見的錯誤把多個請求順序著寫下來了，而后面的請求，對前面請求的返回結果，是有依賴的。經提醒，發現從版開始，返回的就是對象了，那么函數可以直接返回的返回值問題前端小同學在做頁面的時候，犯了個常見的錯誤：把多個Ajax請求順序著寫下來了，而后面的請求，對前面請求的返回結果，是有依賴的。如下面的代碼所示： var someData; $.ajax({ ...

DobbyKim 2019-08-20 14:35 評論0 收藏0
Ajax詳解

摘要：當請求完成后注冊一個回調函數。該請求是否觸發全局處理事件如等，請求發送前的回調函數，用來修改請求發送前，此功能可用來設置自定義頭信息，在函數中返回將取消這個請求。例如，為請求指定一個回調函數名。即改變回調函數的，默認就是傳入的整個對象。 Ajax Ajax 全稱是 asynchronous javascript and xml，并不是新的編程語言，可以說是已有技術的組合，主要用來實現客...

jokester 2019-08-23 14:15 評論0 收藏0
分別使用 XHR、jQuery 和 Fetch 實現 AJAX

摘要：本文詳細講述如何使用原生和來實現。使用可以無刷新地向服務端發送請求接收服務端響應，并更新頁面。分別要用到的方法和方法。，，都是現在和未來解決異步的標準做法，可以完美搭配使用。這也是使用標準一大好處。本文詳細講述如何使用原生 JS、jQuery 和 Fetch 來實現 AJAX。 AJAX 即 Asynchronous JavaScript and XML，異步的 JavaScript...

Julylovin 2019-08-21 11:24 評論0 收藏0
AJAX的出現與跨域處理

摘要：屬性是此次響應的文本內容。我們可以通過屬性，指定這個事件的回調函數，對不同狀態進行不同處理。尤其是當狀態變為的時候，表示通信成功，這時回調函數就可以處理服務器傳送回來的數據。由于臨時的服務器維護或者過載，服務器當前無法處理請求。 XMLHttpRequest JSON AJAX CORS 四個名詞來開會如何發請求在前端的世界里也逛蕩了不少日子了，目前已經get到大約5種發起請求...

RancherLabs 2019-08-26 11:33 評論0 收藏0