1、需求背景
很多時候，我們使用jquery.ajax的方式向後臺傳送請求，型如

$.ajax({
type: “post”,
url: “/User/Edit”,
data: { data: JSON.stringify(postdata) },
success: function (data, status) {
if (status == “success”) {
toastr.success(‘提交資料成功’);
$("#tb_aaa").bootstrapTable(‘refresh’);
}
},
error: function (e) {
},
complete: function () {
}
});

複製程式碼
這種程式碼太常見了，這個時候我們有這樣一個需求：在自己呼叫ajax請求的時候，我們不想每次都寫error:function(e){}這種程式碼，但是我們又想讓它每次都將ajax的錯誤資訊輸出到瀏覽器讓使用者能夠看到。怎麼辦呢？或者我們需要使用Cros時，Header裡面需要帶上Token值，而不想每次都去加上beforeSend: function (request) {request.setRequestHeader(“token”, token);},

2、實現原理
要想實現以上效果其實並不難，我們可以將 $\mathrm{.}$

a j a x ( ) 封 裝 一 層 ， 在 封 裝 的 公 共 方 法 裡 面 定 義 e r r o r 對 應 的 事 件 即 可 。 確 實 ， 這 樣 能 達 到 我 們 的 要 求 ， 但 是 並 不 完 美 ， 原 因 很 簡 單 ： 1 ） 在 j q u e r y 的 基 礎 上 面 再 封 裝 一 層 ， 效 率 不 夠 高 ； 2 ） 需 要 改 變 調 用 者 的 習 慣 ， 每 次 調 用 a j a x 的 時 候 需 要 按 照 我 們 定 義 的 方 法 的 規 則 來 寫 ， 而 不 能 直 接 用 原 生 的 .ajax({})封裝一層，在封裝的公共方法裡面定義error對應的事件即可。確實，這樣能達到我們的要求，但是並不完美，原因很簡單： 1）在jquery的基礎上面再封裝一層，效率不夠高； 2）需要改變呼叫者的習慣，每次呼叫ajax的時候需要按照我們定義的方法的規則來寫，而不能直接用原生的 .ajax({})這種寫法，這是我們不太想看到。

既然如此，那我們如何做到既不封裝控制元件，又能達到以上要求呢？答案就是通過我們的$.extend去擴充套件原生的jquery.ajax。

其實實現起來也並不難，通過以下一段程式碼就能達到我們的要求。

複製程式碼

(function ($) {
    //1.得到$.ajax的物件
    var _ajax = $.ajax;
    $.ajax = function (options) {
        //2.每次呼叫傳送ajax請求的時候定義預設的error處理方法
        var fn = {
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                toastr.error(XMLHttpRequest.responseText, '錯誤訊息', { closeButton: true, timeOut: 0, positionClass: 'toast-top-full-width' });
            },
            success: function (data, textStatus) { },
            beforeSend: function (XHR) { },
            complete: function (XHR, TS) { }
        }
        //3.如果在呼叫的時候寫了error的處理方法，就不用預設的
        if (options.error) {
            fn.error = options.error;
        }
        if (options.success) {
            fn.success = options.success;
        }
        if (options.beforeSend) {
            fn.beforeSend = options.beforeSend;
        }
        if (options.complete) {
            fn.complete = options.complete;
        }
        //4.擴充套件原生的$.ajax方法，返回最新的引數
        var _options = $.extend(options, {
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                fn.error(XMLHttpRequest, textStatus, errorThrown);
            },
            success: function (data, textStatus) {
                fn.success(data, textStatus);
            },
            beforeSend: function (XHR) {
                fn.beforeSend(XHR);
            },
            complete: function (XHR, TS) {
                fn.complete(XHR, TS);
            }
        });
        //5.將最新的引數傳回ajax物件
        _ajax(_options);
    };
})(jQuery);

生產環境示例：
將以下程式碼儲存為js檔案，在需要非同步呼叫的頁面呼叫
這樣，每次請求就在Header裡面自動帶上了token值，該值由Cookies裡面提供，在Cros請求中使用就非常方便了！

(function ($) {
    //1.得到$.ajax的物件
    var _ajax = $.ajax;
    var _token = getCookie("token");
    $.ajax = function (options) {
        //2.每次呼叫傳送ajax請求的時候定義預設的error處理方法
        var fn = {
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                toastr.error(XMLHttpRequest.responseText, '錯誤訊息', { closeButton: true, timeOut: 0, positionClass: 'toast-top-full-width' });
            },
            success: function (data, textStatus) { },
            beforeSend: function (XHR) { },
            complete: function (XHR, TS) { }
        }
        //3.擴充套件原生的$.ajax方法，返回最新的引數
        var _options = $.extend({}, {
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                fn.error(XMLHttpRequest, textStatus, errorThrown);
            },
            success: function (data, textStatus) {
                fn.success(data, textStatus);
            },
            beforeSend: function (XHR) {
                XHR.setRequestHeader('token', _token);
                fn.beforeSend(XHR);
            },
            complete: function (XHR, TS) {
                fn.complete(XHR, TS);
            }
        }, options);
        //4.將最新的引數傳回ajax物件
        _ajax(_options);
        };
    function getCookie(name) {
        var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
        if (arr != null) return unescape(arr[2]); return null;
    };})(jQuery);