实例详解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 相关文章推荐
用javascript实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
项目实践之javascript技巧
Dec 06 Javascript
javascript 处理事件绑定的一些兼容写法
Dec 24 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
Webpack打包字体font-awesome的方法示例
Apr 26 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
浅谈react useEffect闭包的坑
Jun 08 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修改Linux或Unix口令的方法分享
2012/01/30 PHP
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
Python爬虫模拟登录带验证码网站
2016/01/22 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
sklearn的predict_proba使用说明
2020/06/28 Python
Python对excel的基本操作方法
2021/02/18 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
极简的HTML5模版
2015/07/09 HTML / CSS
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
枚举与#define宏的区别
2014/04/30 面试题
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
在职人员函授期间自我评价分享
2013/11/08 职场文书
抗洪救灾标语
2014/10/08 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
java中如何截取字符串最后一位
2022/07/07 Java/Android