jQuery Mockjax外掛程式類比Ajax請求執行個體教程

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

在實際的開發過程中，前端後台協商好了統一的介面，就各自開始自己的任務了。這時候我有這麼一個 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 的預設值。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More