JS 拦截全局ajax请求实例解析

让我来给大家详细讲解一下“JS 拦截全局ajax请求实例解析”的完整攻略。

什么是全局ajax请求

全局ajax请求指在整个页面中，所有发起ajax请求的位置都被拦截并进行处理。这就需要对ajax进行拦截和处理控制，这样可以更好地控制页面数据请求。

为什么要拦截全局ajax请求

拦截全局ajax请求可以实现以下目的：

1. 统一处理数据请求，便于管理和维护。
2. 能够对请求进行全局控制，便于在不同情况下进行处理。
3. 可以自定义请求的参数和返回值，方便对数据进行加工和处理。
4. 可以增加请求的安全性，防止恶意攻击。

拦截全局ajax请求的实现方式

拦截全局ajax请求的实现方式有多种，本文将介绍其中一种基于JQuery的实现方式，通过重写jQuery.ajax函数，来拦截和处理全局ajax请求。

首先，在全局内定义一个变量，用来保存原始的jQuery.ajax函数，如下所示：

var _ajax = $.ajax;

然后，重写jQuery.ajax函数，将原始的jQuery.ajax函数保存到上述变量内，并自定义新的jQuery.ajax函数，如下所示：

$.ajax = function (opt) {
    // TODO: 处理全局ajax请求
    // 保存原始的jQuery.ajax函数
    var _opt = opt.success;
    //自定义的jQuery.ajax函数
    return _ajax($.extend(opt, {
        success: function (data, textStatus, jqXHR) {
            // TODO: 处理原始的jQuery.ajax函数返回的数据
            // 执行原始的jQuery.ajax函数
            _opt(data, textStatus, jqXHR);
        }
    }));
}

在上述代码中，我们定义了一个自定义的jQuery.ajax函数，并将原始的jQuery.ajax函数保存到变量 _ajax 内。在自定义的jQuery.ajax函数内，我们使用了一个闭包，保存了原始的success回调函数。

然后，我们重写了$.ajax函数，将所有的ajax请求都指向了我们自定义的jQuery.ajax函数。在自定义的jQuery.ajax函数内，我们可以根据自己的需求，对请求进行处理，并最终执行原始的jQuery.ajax函数返回的数据。

示例说明

下面通过两个示例，来演示如何实现全局ajax请求的拦截和处理。

示例1：数据加密

假设我们在页面中需要发送一个ajax请求，获取后台返回的一些敏感数据，我们需要将这些数据进行加密后才能在页面上显示，这时我们就可以通过拦截全局ajax请求，对数据进行加密后再返回给页面。

// 定义aes加密和解密方法
var AesUtil = {
    encrypt: function (data, key, iv) {
        var encrypted = aesjs.utils.hex.fromBytes(aesjs.ModeOfOperation.ofb(aesjs.utils.utf8.toBytes(key), iv).encrypt(aesjs.utils.utf8.toBytes(data)));
        return encrypted;
    },
    decrypt: function (data, key, iv) {
        var decrypted = aesjs.utils.utf8.fromBytes(aesjs.ModeOfOperation.ofb(aesjs.utils.utf8.toBytes(key), iv).decrypt(aesjs.utils.hex.toBytes(data)));
        return decrypted;
    }
};

// 保存原来的$.ajax函数
var _ajax = $.ajax;

// 重写$.ajax函数
$.ajax = function (opt) {
    var _opt = opt.success;
    //在这里加密数据
    if (opt.type === 'POST' && opt.data && !opt.isEncrypt) {
        var key = 'myKey';
        var iv = '1234567890abcdef';
        opt.data = { data: AesUtil.encrypt(JSON.parse(opt.data), key, iv), sign: new Date().getTime() + "" };
        opt.isEncrypt = true;
    }
    //自定义的$.ajax函数
    return _ajax($.extend(opt, {
        success: function (data, textStatus, jqXHR) {
            //原来的$.ajax函数返回结果再这里解密
            if (opt.type === 'POST' && data && !opt.isDecrypt) {
                var key = 'myKey';
                var iv = '1234567890abcdef';
                data = AesUtil.decrypt(data, key, iv);
            }
            _opt(data, textStatus, jqXHR);
        }
    }));
};

在上述代码中，我们定义了一个 AesUtils 工具类，里面包含了加密和解密的方法。然后，我们重写了$.ajax函数，当发送请求的类型为 POST 时，我们将请求的数据进行加密，并将 isEncrypt 标记为 true，在返回结果的时候，我们将请求返回的数据进行解密，并将 isDecrypt 标记为 true。

示例2：加载状态提示

假设我们需要在页面中给全部ajax请求添加一个加载状态提示，我们可以在请求发送前显示一个加载状态，然后在请求成功或者失败后隐藏该加载状态。

// 保存原来的$.ajax函数
var _ajax = $.ajax;

// 重写$.ajax函数
$.ajax = function (opt) {
    var $loading = $(".loading");
    //在请求发送前显示loading状态
    var ajax = _ajax.call($, $.extend(opt, {
        beforeSend: function () {
            $loading.show();
        },
        complete: function () {
            $loading.hide();
        },
        success: function (data, textStatus, jqXHR) {
            if (opt.success) {
                opt.success(data, textStatus, jqXHR);
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            if (opt.error) {
                opt.error(xhr, textStatus, errorThrown);
            }
        }
    }));
    //返回ajax对象
    return ajax;
};

在上述代码中，我们定义了一个 $loading 全局变量，用于保存加载状态的显示内容。然后，我们重写了$.ajax函数，在请求发送前显示加载状态，并在请求成功或失败后隐藏加载状态。

这两个示例展示了如何使用JQuery来拦截全局ajax请求。无论是加密数据，还是加载状态提示，只需要在自定义的jQuery.ajax函数中进行处理即可。