让我来给大家详细讲解一下“JS 拦截全局ajax请求实例解析”的完整攻略。
全局ajax请求指在整个页面中,所有发起ajax请求的位置都被拦截并进行处理。这就需要对ajax进行拦截和处理控制,这样可以更好地控制页面数据请求。
拦截全局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请求的拦截和处理。
假设我们在页面中需要发送一个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
。
假设我们需要在页面中给全部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
函数中进行处理即可。
本文链接:http://task.lmcjl.com/news/11373.html