Ajax-hook詳解

Ajax-hook是一款非常方便的JS庫，在前後端交互中起到了非常重要的作用。本文將從ajaxhook原理、ajaxhookjs、ajaxhook用法、ajaxhook使用示例、ajaxhook把請求掛起、ajaxhook全局加解密等多個方面對其進行詳細的闡述。

一、ajaxhook原理

ajaxhook庫可以通過攔截XMLHttpRequest對象來捕獲前端HTTP請求，並再請求被發送前做出更改。其核心代碼如下：

(function () {
    var XHR = XMLHttpRequest.prototype;
    var open = XHR.open;
    var send = XHR.send;
    ...
})();

上述代碼通過重新定義XMLHttpRequest.prototype對象中的open、send兩個方法，來將攔截到的HTTP請求進行修改處理。

二、ajaxhookjs

ajaxhookjs是一個能夠將ajax-hook引入到項目中的JS文件。其使用方法非常簡單，只需要在HTML的中添加下面代碼即可：

<!-- ajaxhook.js -->
<script src="ajaxhook.js"></script>

三、ajaxhook用法

ajaxhook用法非常簡單，只需要在需要攔截的請求前添加上hook即可：

function fn (ajax) {
    return function (data) {
        // Do something here
        return ajax.apply(this, arguments);
    };
}

// Hook jQuery's ajax method
$.ajax = fn($.ajax);

上述代碼是通過攔截jQuery庫中的ajax方法來進行示範的。其中fn函數用來對請求進行定製化的處理，如全局加解密等。然後將該函數注入ajax方法中，即可實現對所有請求的攔截效果。

四、ajaxhook使用示例

1、hook請求頭

我們可以通過hook方法來修改請求頭信息:

function fn (ajax) {
    return function (data) {
        // Do something here
        data.headers['Authorization'] = 'Bearer ' + token;  // 修改token信息
        return ajax.apply(this, arguments);
    };
}

// Hook jQuery's ajax method
$.ajax = fn($.ajax);

2、hook請求體

我們也可以通過hook方法來修改請求體：

function fn (ajax) {
    return function (data) {
        // Do something here
        data.data = encrypt(data.data);   // 數據加密
        return ajax.apply(this, arguments);
    };
}

// Hook jQuery's ajax method
$.ajax = fn($.ajax);

3、hook響應信息

還可以通過hook方法來對響應信息進行修改：

function fn (ajax) {
    return function (data) {
        // Do something here
        var defer = new $.Deferred();

        ajax(data).done(function (response) {
            response.result = decrypt(response.result);   // 解密響應信息
            defer.resolve(response);
        });

        return defer.promise();
    };
}

// Hook jQuery's ajax method
$.ajax = fn($.ajax);

五、ajaxhook把請求掛起

在某些時候，我們需要將異步請求掛起，等待其他異步操作完成之後再繼續執行。使用ajaxhook，我們只需要在攔截到請求後，將請求掛起即可：

(function () {
    var XHR = XMLHttpRequest.prototype;
    var open = XHR.open;
    var send = XHR.send;

    XHR.open = function (method, url, async) {
        this._url = url;
        open.call(this, method, url, async);
    };

    XHR.send = function (data) {
        var _this = this;
        var oldOnReadyStateChange;
        var url = this._url;

        function onReadyStateChange() {
            if (this.readyState === 1) {
                var hookData = {method: _this._method, url: url, data: data};
                // Hook the request with the hook function
                hook(hookData, function () {
                    _this._data = hookData.data;
                    send.call(_this, _this._data);
                });

                oldOnReadyStateChange.apply(this, arguments);
            }
        }

        if (!this.addEventListener) {
            oldOnReadyStateChange = this.onreadystatechange;
            this.onreadystatechange = onReadyStateChange;
        } else {
            this.addEventListener("readystatechange", onReadyStateChange);
        }
    };
})();

上述代碼中的hook函數中，我們可以實現將異步請求掛起，等待其他異步操作完成之後，再繼續執行該請求。具體的操作方法詳見以上代碼實現。

六、ajaxhook全局加解密

在實際開發過程中，我們經常會需要對前端與後台交互的數據進行加解密操作，這時候我們可以使用ajaxhook來實現全局加解密。

首先，我們需要在請求體的hook方法中，將所有的請求數據進行加密操作：

function encryptData(data) {
    return CryptoJS.AES.encrypt(data, '123456').toString();  // 加密方式為AES加密
}

function fn (ajax) {
    return function (data) {
        data.data = encryptData(data.data);
        return ajax.apply(this, arguments);
}

然後，在響應信息的hook方法中，將所有返回的數據進行解密操作：

function decryptData(data) {
    return CryptoJS.AES.decrypt(data, '123456').toString(CryptoJS.enc.Utf8);
}

function fn (ajax) {
    return function (data) {
        var defer = new $.Deferred();

        ajax(data).done(function (response) {
            response.result = decryptData(response.result);
            defer.resolve(response);
       });

        return defer.promise();
    };
}

以上就是ajaxhook全局加解密的實現方法。我們可以在項目中，將加解密方法進行封裝，然後在請求和響應的hook方法中統一調用，實現全局加解密的效果。