在實際的開發過程中，前端後臺協商好了統一的介面，就各自開始自己的任務了。這時候我有這麼一個 Ajax 請求需要從後臺獲取數據：$.ajax({ url: '/products/'}).done(function(res) { $('#result').html(res);});但是這個服務可能還.....
在實際的開發過程中，前端後臺協商好了統一的介面，就各自開始自己的任務了。這時候我有這麼一個 Ajax 請求需要從後臺獲取數據：
$.ajax({
url: '/products/'
}).done(function(res) {
$('#result').html(res);
});但是這個服務可能還沒有創建，也許是後臺開發那個小伙子（就是那些使用 PHP、Ruby、.NET、GoldFusion 等等語言的帥哥們）開小差去了，也許是他忙於其它事情。總之，當這個請求發出的時候我不能得到我想要的結果，我只能得到一個 404 (Not Found) 錯誤。
這實在是很糟糕，催促也沒有用，旁邊的測試人員吵著鬧著要測試呢，而我自己也迫切希望看到立竿見影的效果。這個時候，就只能依靠自己了，其中一個比較好的方法就是模擬 Ajax 請求，這裡我使用 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 的預設值。
