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 等等更多請求,甚至還可以使用Regex進行更複雜的匹配模式:
$.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 請求的相關知識,希望對大家有所協助。