实例详解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禁止回车触发表单提交
Dec 12 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
vue.js中过滤器的使用教程
Jun 08 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
如何基于javascript实现贪吃蛇游戏
Feb 09 Javascript
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
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解决的一个栈的面试题
2014/07/02 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
javascript网页关键字高亮代码
2008/07/30 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
Python 字符串操作方法大全
2014/03/11 Python
python中的sort方法使用详解
2014/07/25 Python
python 排序算法总结及实例详解
2016/09/28 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
梅西百货官网:Macy’s
2020/08/04 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
PHP如何删除一个Cookie值
2012/11/15 面试题
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
工程造价管理专业大专生求职信
2013/10/06 职场文书
经济与贸易专业应届生求职信
2013/11/19 职场文书
公司保密承诺书
2014/03/27 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书