实例详解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 相关文章推荐
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
JS双击变input框批量修改内容
Dec 12 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
如何在vue中使用ts的示例代码
Feb 28 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
javascript中的this作用域详解
Jul 15 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开发中AJAX技术的简单应用
2015/12/11 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
一个简单的javascript类定义例子
2009/09/12 Javascript
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
javascript URL编码和解码使用说明
2010/04/12 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
深入解析Python中的上下文管理器
2016/06/28 Python
Python执行时间的计算方法小结
2017/03/17 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
Python中的默认参数实例分析
2018/01/29 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
浅谈python中get pass用法
2019/03/19 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
python中如何使用insert函数
2020/01/09 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
小学教师岗位职责
2013/11/25 职场文书
安全生产投入制度
2014/01/29 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
单位员工收入证明样本
2014/10/09 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
Golang获取List列表元素的四种方式
2022/04/20 Golang