jquery mockjax是一个很好用的模拟模拟假数据的插件,前段时间才开始接触到,于是对它内部的实现原理比较感兴趣

拦截请求?

    jquery mockjax造成的假象就是好像咱门发出去的ajax请求被拦截了,转而请求到我们事先配置的假数据上了,之前一直好奇这到底是怎么拦截的,修改请求头?然后在浏览器查看网络请求,发现并没有发送请求,说明它只是只是制造了请求被拦截的假象,然后事实上是什么呢?

查看源代码

    于是在发送请求的部分打了断点,一步一步查看,发现确实有几个关键的点

ajax方法被替换掉了

image.png

在这之前先把ajax方法保存起来

image.png

有了以上处理,使得在调用以下方法时能够偷梁换柱

image.png

ajax在页面中被调用时,传进去的url,会一一映射到上面mock函数中配置项中的url,如果匹配就是返回responseText中的内容

因为最初配置的假数据是这样的(ps:我在这将jquery mockjax赋值给mock)

image.png

最后你会发现既然ajax方法被替换了,居然还能进行连贯操作调用done函数。

是因为该方法继承了之前被保存的ajax函数,并且将自身返回出去

image.png