实例详解jQuery Mockjax 插件模拟 Ajax 请求


Posted in Javascript onJanuary 12, 2016

1. 原理

jquery-mockjax是用于mock 前台ajax向后台请求的返回数据。

原理很简单

在你js代码要发送ajax请求的地方断点一下,然后比较在【引入jquery-mockjax】 和 【没有引入jquery-mockjax】的情况下$.ajax.toString()的值情况。

很明显,引入jquery-mockjax时,这个mock库会对jquery提供的ajax函数做替换。这样就很容易能mock起来。

在实际的开发过程中,前端后台协商好了统一的接口,就各自开始自己的任务了。这时候我有这么一个 Ajax 请求需要从后台获取数据:

$.ajax({
url: '/products/'
}).done(function(res) {
$('#result').html(res);
});

但是这个服务可能还没有创建,也许是后台开发那个小伙子(就是那些使用 PHP、Ruby、.NET、GoldFusion 等等语言的帅哥们)开小差去了,也许是他忙于其它事情。总之,当这个请求发出的时候我不能得到我想要的结果,我只能得到一个 404 (Not Found) 错误。

这实在是很糟糕,催促也没有用,旁边的测试人员吵着闹着要测试呢,而我自己也迫切希望看到立竿见影的效果。这个时候,就只能依靠自己了,其中一个比较好的方法就是模拟 Ajax 请求,这里我使用 jQuery Mockjax 插件。

地址:jQuery Mockjax

这是一个 jQuery 插件,将其下载下来引用的时候放在 jQuery 之后:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="result"></div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="vendor/jquery.mockjax.js"></script>
</body>
</html>

然后在请求代码之前执行模拟请求的代码,使用该插件提供的 $.mockjax() 方法,暂时先指定2个参数 url 和 responseText:

$.mockjax({
url: '/products/',
responseText: 'Here you are!'
});

它会监测具有相同 url 的 Ajax 请求并在请求发出时拦截同时模拟响应,responseText 的值就是模拟的响应内容,这样我的程序就能愉快地执行了,最开始那个例子的运行结果就是 'Here you are' 这段内容将会显示到 div#result 中。当我不再需要模拟请求的时候可以使用 $.mockjax.clear() 方法清除掉:

$.mockjax.clear();

一旦后台服务开发完成,我就可以使用该方法清除掉所有模拟请求体验真实的请求效果了。如果不希望一次性清除掉所有的模拟请求,而是针对某个模拟请求,可以传入该模拟请求的 ID,每个模拟请求都会返回一个 ID 值:

var idOne = $.mockjax({ }),
idTwo = $.mockjax({ });
$.mockjax.clear(idTwo);

这样就把第二个模拟请求清除掉了,保留了第一个。

由于 Ajax 请求的 url 地址要和模拟请求的 url 对应,假设页面上有很多请求,每个请求都去模拟的话就会感觉很痛苦,好在,该插件的 url 参数提供了一个通配符 * 方式:

$.mockjax({
url: '/books/*'
});

这样除了可以匹配 url 地址为 /books/cook 的请求还可以匹配地址为 /books/math 等等更多请求,甚至还可以使用正则表达式进行更复杂的匹配模式:

$.mockjax({
url: /^\/data\/(cook|math)$/i
});

使用插件的 data 参数可以根据不同的请求数据执行不同的模拟响应:

$.mockjax({
url: '/books/',
data: {
type: 'cook'
},
responseText: 'You want a cook book!'
});
$.mockjax({
url: '/books/',
data: {
type: 'math'
},
responseText: {
"content": "You want a math book!"
}
});

就算是同一个 url 地址当请求的数据不同的时候获得的响应内容也不一样。响应内容除了纯文本字符串,也可以使用 json
格式的字符串。

该插件还提供了一个默认参数设置对象 $.mockjaxSettings,没有指定的参数都将使用这些默认值:

$.mockjaxSettings = {
logging: true,
status: 200,
statusText: "OK",
responseTime: 500,
isTimeout: false,
throwUnmocked: false,
contentType: 'text/plain',
response: '',
responseText: '',
responseXML: '',
proxy: '',
proxyType: 'GET',
lastModified: null,
etag: '',
headers: {
etag: 'IJF@H#@923uf8023hFO@I#H#',
'content-type' : 'text/plain'
}
};

将默认值修改之后,后面的模拟请求都会使用修改后的值:

$.mockjaxSettings.contentType = "application/json";

这里只修改了其中的 contentType 的默认值。

以上所述通过实例详解jQuery Mockjax 插件模拟 Ajax 请求的相关知识,希望对大家有所帮助。

Javascript 相关文章推荐
基于jQuery的js分页代码
Jun 10 Javascript
jQuery示例收集
Nov 05 Javascript
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 #Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 #Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 #Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 #Javascript
js实现字符串和数组之间相互转换操作
Jan 12 #Javascript
js右下角弹出提示框示例代码
Jan 12 #Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 #Javascript
You might like
php中stream(流)的用法
2014/03/25 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
提高网站信任度的技巧
2008/10/17 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
python数字图像处理之高级形态学处理
2018/04/27 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
毕业生医学检验求职信
2013/10/16 职场文书
新员工欢迎词
2014/01/12 职场文书
小学二年级评语
2014/04/21 职场文书
党员领导干部承诺书
2014/05/28 职场文书
四风问题查摆材料
2014/08/25 职场文书
交通安全横幅标语
2014/10/07 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
高中校园广播稿
2014/10/21 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
2014年教研室工作总结
2014/12/06 职场文书
通过Python把学姐照片做成拼图游戏
2022/02/15 Python
浅谈Redis的事件驱动模型
2022/05/30 Redis