實例詳解jQuery Mockjax 插件模擬 Ajax 請求
1. 原理
jquery-mockjax是用于mock 前臺ajax向后臺請求的返回數(shù)據(jù)。
原理很簡單
在你js代碼要發(fā)送ajax請求的地方斷點一下，然后比較在【引入jquery-mockjax】 和 【沒有引入jquery-mockjax】的情況下$.ajax.toString()的值情況。
很明顯，引入jquery-mockjax時，這個mock庫會對jquery提供的ajax函數(shù)做替換。這樣就很容易能mock起來。
在實際的開發(fā)過程中，前端后臺協(xié)商好了統(tǒng)一的接口，就各自開始自己的任務了。這時候我有這么一個 Ajax 請求需要從后臺獲取數(shù)據(jù)：
$.ajax({
url: '/products/'
}).done(function(res) {
$('#result').html(res);
});
但是這個服務可能還沒有創(chuàng)建，也許是后臺開發(fā)那個小伙子（就是那些使用 PHP、Ruby、.NET、GoldFusion 等等語言的帥哥們）開小差去了，也許是他忙于其它事情?？傊?，當這個請求發(fā)出的時候我不能得到我想要的結果，我只能得到一個 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>
然后在請求代碼之前執(zhí)行模擬請求的代碼，使用該插件提供的 $.mockjax() 方法，暫時先指定2個參數(shù) url 和 responseText：
$.mockjax({
url: '/products/',
responseText: 'Here you are!'
});
它會監(jiān)測具有相同 url 的 Ajax 請求并在請求發(fā)出時攔截同時模擬響應，responseText 的值就是模擬的響應內(nèi)容，這樣我的程序就能愉快地執(zhí)行了，最開始那個例子的運行結果就是 'Here you are' 這段內(nèi)容將會顯示到 div#result 中。當我不再需要模擬請求的時候可以使用 $.mockjax.clear() 方法清除掉：
$.mockjax.clear();
一旦后臺服務開發(fā)完成，我就可以使用該方法清除掉所有模擬請求體驗真實的請求效果了。如果不希望一次性清除掉所有的模擬請求，而是針對某個模擬請求，可以傳入該模擬請求的 ID，每個模擬請求都會返回一個 ID 值：
var idOne = $.mockjax({ }),
idTwo = $.mockjax({ });
$.mockjax.clear(idTwo);
這樣就把第二個模擬請求清除掉了，保留了第一個。
由于 Ajax 請求的 url 地址要和模擬請求的 url 對應，假設頁面上有很多請求，每個請求都去模擬的話就會感覺很痛苦，好在，該插件的 url 參數(shù)提供了一個通配符 * 方式：
$.mockjax({
url: '/books/*'
});
這樣除了可以匹配 url 地址為 /books/cook 的請求還可以匹配地址為 /books/math 等等更多請求，甚至還可以使用正則表達式進行更復雜的匹配模式：
$.mockjax({
url: /^\/data\/(cook|math)$/i
});
使用插件的 data 參數(shù)可以根據(jù)不同的請求數(shù)據(jù)執(zhí)行不同的模擬響應：
$.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 地址當請求的數(shù)據(jù)不同的時候獲得的響應內(nèi)容也不一樣。響應內(nèi)容除了純文本字符串，也可以使用 json
格式的字符串。
該插件還提供了一個默認參數(shù)設置對象 $.mockjaxSettings，沒有指定的參數(shù)都將使用這些默認值：
$.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 請求的相關知識，希望對大家有所幫助。
相關文章
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)嵌套選項卡功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了jQuery中toggleClass()方法用法,實例分析了toggleClass()方法的功能、定義及對添加或移除匹配元素的一個或多個類進行切換的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jquery實現(xiàn)點擊空白處隱藏元素div等方法和實現(xiàn)代碼的講解，一起學習下。2017-12-12
這篇文章主要為大家詳細介紹了jquery實現(xiàn)上傳圖片功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了jQuery+css實現(xiàn)的切換圖片功能代碼,涉及jQuery響應鼠標事件動態(tài)變換頁面元素樣式的相關技巧,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了基于jquery實現(xiàn)圖片上傳本地預覽功能的相關資料,需要的朋友可以參考下2016-01-01
下面小編就為大家?guī)硪黄狫Query為元素添加樣式的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
Jquery與Bootstrap實現(xiàn)后臺管理頁面增刪改查功能示例
本篇文章主要介紹了Jquery與Bootstrap實現(xiàn)后臺管理頁面增刪改查功能示例，具有一定的參考價值，有興趣的可以了解一下。2017-01-01
數(shù)據(jù)緩存系統(tǒng)最早應該是jQuery1.2引入的，那時它的事件系統(tǒng)完成照搬DE大神的addEvent.js，而addEvent在實現(xiàn)有個缺憾，它把事件的回調(diào)都放到EventTarget之上，這會引發(fā)循環(huán)引用2012-11-11
這篇文章主要介紹了jquery簡單倒計時實現(xiàn)方法,涉及jQuery定時函數(shù)操作及日期與實現(xiàn)的運算技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12