實例詳解jQuery Mockjax 外掛程式模擬 Ajax 請求

首頁

web前端

js教程

實例詳解jQuery Mockjax 外掛程式模擬 Ajax 請求_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:20 PM

ajax請求

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 等等更多請求，甚至還可以使用正則表達式進行更複雜的匹配模式：

$.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 請求的相關知識，希望對大家有幫助。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。