实例详解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 相关文章推荐
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
jquery.cookie用法详细解析
Dec 18 Javascript
js模仿hover的具体实现代码
Dec 30 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
激动人心的 Angular HttpClient的源码解析
Jul 10 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 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超级全局变量
2010/01/26 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
tab栏切换原理
2017/03/22 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
Paypal支付不完全指北
2020/06/04 Javascript
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
python中的协程深入理解
2019/06/10 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
德国网上药房:Apotal
2017/04/04 全球购物
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
应聘教师推荐信
2013/10/31 职场文书
临床医师专业个人自我评价范文
2013/11/07 职场文书
卖房协议书
2014/04/11 职场文书
小学课外活动总结
2014/07/09 职场文书
公司周年庆典标语
2014/10/07 职场文书
2015年党建工作总结
2015/03/30 职场文书
2015年双拥工作总结
2015/04/08 职场文书
幼儿园开学通知
2015/04/24 职场文书
深度学习小工程练习之垃圾分类详解
2021/04/14 Python
MySQL 十大常用字符串函数详解
2021/06/30 MySQL