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

pkhope 發(fā)布于2019-08-26 13:54 / 444人閱讀

摘要：使用過(guò)的同學(xué)，應(yīng)該對(duì)事件綁定方法有一定的了解。實(shí)現(xiàn)方式以下為個(gè)人類庫(kù)中實(shí)現(xiàn)方式。代碼中使用到一個(gè)基礎(chǔ)方法對(duì)象，該對(duì)象為的基礎(chǔ)類。如果想了解更多，可以通過(guò)點(diǎn)擊進(jìn)入查看原碼。

使用過(guò)jQuery的同學(xué)，應(yīng)該對(duì)事件綁定方法ajax有一定的了解。 在個(gè)人類庫(kù)jTool 中實(shí)現(xiàn)了這個(gè)方法，這里就來(lái)細(xì)說(shuō)下原生實(shí)現(xiàn)方式。

實(shí)現(xiàn)方式

以下為個(gè)人類庫(kù)jTool 中 Ajax 實(shí)現(xiàn)方式。
代碼中使用到一個(gè)基礎(chǔ)方法對(duì)象utilities ，該對(duì)象為jTool 的基礎(chǔ)類。 如果想了解更多，可以通過(guò)點(diǎn)擊進(jìn)入查看原碼。

/*
 * ajax
 * type === GET: data格式 name=baukh&age=29
 * type === POST: data格式 { name: "baukh", age:29 }
 * 與 jquery 不同的是,[success, error, complete]返回的第二個(gè)參數(shù), 并不是返回錯(cuò)誤信息, 而是錯(cuò)誤碼
 * */
var extend = require("./extend");
var utilities = require("./utilities");
function ajax(options) {
    var defaults = {
        url: null,// 請(qǐng)求地址
        type: "GET",// 請(qǐng)求類型
        data: null,// 傳遞數(shù)據(jù)
        headers: {},// 請(qǐng)求頭信息
        async: true,// 是否異步執(zhí)行
        beforeSend: utilities.noop,// 請(qǐng)求發(fā)送前執(zhí)行事件
        complete: utilities.noop,// 請(qǐng)求發(fā)送后執(zhí)行事件
        success: utilities.noop,// 請(qǐng)求成功后執(zhí)行事件
        error: utilities.noop// 請(qǐng)求失敗后執(zhí)行事件
    };
    options = extend(defaults, options);
    if (!options.url) {
        utilities.error("jTool ajax: url不能為空");
        return;
    }
    var xhr = new XMLHttpRequest();
    var formData = "";
    if (utilities.type(options.data) === "object") {
        utilities.each(options.data, function (key, value) {
        if(formData !== "") {
            formData += "&";
        }
        formData += key + "=" + value;
        });
    }else {
        formData = options.data;
    }
    if(options.type === "GET" && formData) {
        options.url = options.url + (options.url.indexOf("?") === -1 ?  "?" : "&") + formData;
        formData = null;
    }
    xhr.open(options.type, options.url, options.async);
    for (var key in options.headers) {
        xhr.setRequestHeader(key, options.headers[key]);
    }
    // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    // 執(zhí)行發(fā)送前事件
    options.beforeSend(xhr);
    // 監(jiān)聽(tīng)onload并執(zhí)行完成事件
    xhr.onload = function() {
        // jquery complete(XHR, TS)
        options.complete(xhr, xhr.status);
    };
    // 監(jiān)聽(tīng)onreadystatechange并執(zhí)行成功失敗事件
    xhr.onreadystatechange = function() {
        if (xhr.readyState !== 4) {
            return;
        }
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
            // jquery success(XHR, TS)
            options.success(xhr.response, xhr.status);
        } else {
        // jquery error(XHR, TS, statusText)
            options.error(xhr, xhr.status, xhr.statusText);
        }
    };
    xhr.send(formData);
}
function post(url, data, callback) {
    ajax({ url: url, type: "POST", data: data, success: callback });
}
function get(url, data, callback) {
    ajax({ url: url, type: "GET", data: data, success: callback });
}
module.exports = {
    ajax: ajax,
    post: post,
    get: get
};

隨筆一行
這是前端最好的時(shí)代，這也是前端最壞的時(shí)代。眾多前端框架滿天飛，隨著 jQuery 在前端行業(yè)的慢慢弱化，總是會(huì)有一種斯人遠(yuǎn)去，何者慰籍的感覺(jué)。互勉吧，各位。

另推薦個(gè)表格組件gridManager