在实际的开发过程中，前端后台协商好了统一的接口，就各自开始自己的任务了。这时候我有这么一个 Ajax 请求需要从后台获取数据：

  1. $.ajax({
  2.   url: '/products/'
  3. }).done(function(res) {
  4.   $('#result').html(res);
  5. });

但是这个服务可能还没有创建，也许是后台开发那个小伙子（就是那些使用 PHP、Ruby、.NET、GoldFusion 等等语言的帅哥们）开小差去了，也许是他忙于其它事情。总之，当这个请求发出的时候我不能得到我想要的结果，我只能得到一个 404 (Not Found) 错误。

这实在是很糟糕，催促也没有用，旁边的测试人员吵着闹着要测试呢，而我自己也迫切希望看到立竿见影的效果。这个时候，就只能依靠自己了，其中一个比较好的方法就是模拟 Ajax 请求，这里我使用 jQuery Mockjax 插件。

地址：jQuery Mockjax

这是一个 jQuery 插件，将其下载下来引用的时候放在 jQuery 之后：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Test</title>
  5. </head>
  6. <body>
  7.   <div id="result"></div>
  8.   <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  9.   <script src="vendor/jquery.mockjax.js"></script>
  10. </body>
  11. </html>

然后在请求代码之前执行模拟请求的代码，使用该插件提供的 $.mockjax() 方法，暂时先指定2个参数 url 和 responseText：

  1. $.mockjax({
  2.   url: '/products/',
  3.   responseText: 'Here you are!'
  4. });

它会监测具有相同 url 的 Ajax 请求并在请求发出时拦截同时模拟响应，responseText 的值就是模拟的响应内容，这样我的程序就能愉快地执行了，最开始那个例子的运行结果就是 'Here you are' 这段内容将会显示到 div#result 中。当我不再需要模拟请求的时候可以使用 $.mockjax.clear() 方法清除掉：

  1. $.mockjax.clear();

一旦后台服务开发完成，我就可以使用该方法清除掉所有模拟请求体验真实的请求效果了。如果不希望一次性清除掉所有的模拟请求，而是针对某个模拟请求，可以传入该模拟请求的 ID，每个模拟请求都会返回一个 ID 值：

  1. var idOne = $.mockjax({ }),
  2.     idTwo = $.mockjax({ });
  4. $.mockjax.clear(idTwo);

这样就把第二个模拟请求清除掉了，保留了第一个。

由于 Ajax 请求的 url 地址要和模拟请求的 url 对应，假设页面上有很多请求，每个请求都去模拟的话就会感觉很痛苦，好在，该插件的 url 参数提供了一个通配符 * 方式：

  1. $.mockjax({
  2.   url: '/books/*'
  3. });

这样除了可以匹配 url 地址为 /books/cook 的请求还可以匹配地址为 /books/math 等等更多请求，甚至还可以使用正则表达式进行更复杂的匹配模式：

  1. $.mockjax({
  2.   url: /^\/data\/(cook|math)$/i
  3. });

使用插件的 data 参数可以根据不同的请求数据执行不同的模拟响应：

  1. $.mockjax({
  2.   url: '/books/',
  3.   data: {
  4.     type: 'cook'
  5.   },
  6.   responseText: 'You want a cook book!'
  7. });
  9. $.mockjax({
  10.   url: '/books/',
  11.   data: {
  12.     type: 'math'
  13.   },
  14.   responseText: {
  15.     "content": "You want a math book!"
  16.   }
  17. });

就算是同一个 url 地址当请求的数据不同的时候获得的响应内容也不一样。响应内容除了纯文本字符串，也可以使用 json

格式的字符串。

该插件还提供了一个默认参数设置对象 $.mockjaxSettings，没有指定的参数都将使用这些默认值：

  1. $.mockjaxSettings = {
  2.   logging:       true,
  3.   status:        200,
  4.   statusText:    "OK",
  5.   responseTime:  500,
  6.   isTimeout:     false,
  7.   throwUnmocked: false,
  8.   contentType:   'text/plain',
  9.   response:      '',
  10.   responseText:  '',
  11.   responseXML:   '',
  12.   proxy:         '',
  13.   proxyType:     'GET',
  14.   lastModified:  null,
  15.   etag:          '',
  16.   headers: {
  17.     etag: 'IJF@H#@923uf8023hFO@I#H#',
  18.     'content-type' : 'text/plain'
  19.   }
  20. };

将默认值修改之后，后面的模拟请求都会使用修改后的值：

  1. $.mockjaxSettings.contentType = "application/json";

这里只修改了其中的 contentType 的默认值。

更多乐趣，请自行探索！

使用 jQuery Mockjax 插件模拟 Ajax 请求的更多相关文章

  1. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  2. 利用JQUERY实现多个AJAX请求等待

    利用JQUERY实现多个AJAX请求等待 li {list-style-type:decimal;}.wiz-editor-body ol.wiz-list-level2 > li {list- ...

  3. 模拟ajax请求爬取微博

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2018/9/26 10:26 # @Author : Sa.Song # @Desc ...

  4. jQuery Mockjax插件使用心得

    最近指导前端攻城狮在后台代码没有完成前测试自己写的后台代码,第一个版本是让他直接创建一个data.json静态数据,然后再ajax调用,缺点非常明显,首先需要localhost的支持,其次是能测的功能 ...

  5. 使用jquery-mockjax模拟ajax请求做前台測试

    一般来说,我们做web开发的时候前后台是分开做的,这样带来的优点是前台的开发者能够安心的写前台代码而后台的小伙伴就安心研究后台就OK了. 可是这样带来一个问题.当后台的小伙伴被天灾军团带走了,那前台须 ...

  6. jQuery delegate方法实现Ajax请求绑定事件不丢失

    给元素绑定click事件后 ,遇到一个问题:当执行一些ajax请求,再次调用此页面,里面的这个click事件就失效了 比如说:我的分页是一个ajax请求 但我点下一页时 后生成的元素a就没有了clic ...

  7. POSTMAN模拟AJAX请求

    环境: 1.测试工具:POSTMAN 2.调试框架:THINKPHP 3.开发工具:PHPSTORM 需求: 1.判断HTTP提交过来的请求是否为AJAX: 是:进行,修改.新增 否:进行查询,并返回 ...

  8. jQuery实现多个ajax请求等待

    通常,jQuery的函数ajax进行Ajax调用.函数ajax只能做一个Ajax调用.当Ajax调用成功时,执行回调函数.可选地,当Ajax调用返回错误时,调用另一个回调函数.但是,该功能不能根据这些 ...

  9. MVC4 AspNet MVC下的Ajax / 使用JQuery做相关的Ajax请求

    源码参考:链接:http://pan.baidu.com/s/1pKhHHMj  密码:mkr4 1:新建-->项目-->Web-->ASP.NET MVC 4 Web 应用程序.命 ...

随机推荐

  1. RWD Table Patterns – 响应式表格解决方案

    在显示复杂的表格数据的时候,相信 Web 开发人员都碰到过显示不下的情况.RWD Table Patterns 是一个很好的响应式表格解决方案.它采用移动优先以及渐进增强的设计理念,在不支持响应式的浏 ...

  2. js基础-表单验证和提交

    基础知识: 原始提交如下: <form action="/login" method="post" id="form1"> &l ...

  3. [Logstash-input-redis] 使用详解

    redis插件的完整配置 input { redis { batch_count => 1 #返回的事件数量,此属性仅在list模式下起作用. data_type => "lis ...

  4. c# 游戏策划配置工具

    该工具是提供策划配置excel数据,导出到mysql数据库,以及生成xml文件,和对应的xml解析实体类 实现了程序 excel 列名 ID =P 表示ID这列是唯一字段 =S=300 表示这列类型是 ...

  5. SQL Server安全（9/11）：透明数据加密（Transparent Data Encryption）

    在保密你的服务器和数据,防备当前复杂的攻击,SQL Server有你需要的一切.但在你能有效使用这些安全功能前,你需要理解你面对的威胁和一些基本的安全概念.这篇文章提供了基础,因此你可以对SQL Se ...

  6. javascript设计模式实践之代理模式--图片预加载

    图片的预加载就是在加载大图片前,先显示一个loading.gif,就算在网络比较慢的时候也能让人知道正在加载,总比啥反应都没有强. 下面这段代码就是预加载的一个简单的实现,假设先不处理加载图片时的on ...

  7. jQuery使用FormData上传文件

    这段时间,一直练习在ASP.NET MVC程序中上传文件.静态,动态,单个或多文件上传. 在网上有看到网友提及使用FormData来上传,Insus.NET觉得是一个很不错的方式. 控制器中,创建两个 ...

  8. 基础复习 关于JS

    1,js是一门解释型语言,无需编译,编写js要知道当前对象有什么成员,未必所有成员都能点出来. 2,js大小写敏感,严格区分大小写. 3,弱类型语言,声明用var,字符串推荐使用单引号. 4,==要先 ...

  9. 禅道PMS兼容redmine用户认证接口

    项目地址:https://github.com/web3d/zentao-redmine-userauth zentao-redmine-userauth 做了一个基本的用户认证接口,兼容redmin ...

  10. MongoDB学习-安装流程

    MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的. 支持的数据结构非常松散,是类似json的bjson格式,因此可以存储比较复杂的数据类型. ...