实例详解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实现 在光标处插入指定内容
May 25 Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
JS对日期操作封装代码实例
Nov 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 学习路线与时间表
2010/02/21 PHP
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
Javascript中的默认参数详解
2014/10/22 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
python Opencv将图片转为字符画
2021/02/19 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
如何解决安装python3.6.1失败
2020/07/01 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
北京某公司的.net笔试题
2014/03/20 面试题
大学生个人简历自我评价
2013/11/16 职场文书
关于旅游的活动方案
2014/08/15 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
流动人口婚育证明
2014/10/19 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
芙蓉镇观后感
2015/06/10 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android