亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

實(shí)例詳解jQuery Mockjax 插件模擬 Ajax 請(qǐng)求

 更新時(shí)間：2016年01月12日 09:25:49   作者：jerrylsxu  
這篇文章主要介紹了實(shí)例詳解jQuery Mockjax 插件模擬 Ajax 請(qǐng)求的相關(guān)資料,需要的朋友可以參考下

1. 原理

jquery-mockjax是用于mock 前臺(tái)ajax向后臺(tái)請(qǐng)求的返回?cái)?shù)據(jù)。

原理很簡(jiǎn)單

在你js代碼要發(fā)送ajax請(qǐng)求的地方斷點(diǎn)一下，然后比較在【引入jquery-mockjax】 和 【沒(méi)有引入jquery-mockjax】的情況下$.ajax.toString()的值情況。

很明顯，引入jquery-mockjax時(shí)，這個(gè)mock庫(kù)會(huì)對(duì)jquery提供的ajax函數(shù)做替換。這樣就很容易能mock起來(lái)。

在實(shí)際的開(kāi)發(fā)過(guò)程中，前端后臺(tái)協(xié)商好了統(tǒng)一的接口，就各自開(kāi)始自己的任務(wù)了。這時(shí)候我有這么一個(gè) Ajax 請(qǐng)求需要從后臺(tái)獲取數(shù)據(jù)：

$.ajax({
url: '/products/'
}).done(function(res) {
$('#result').html(res);
});

但是這個(gè)服務(wù)可能還沒(méi)有創(chuàng)建，也許是后臺(tái)開(kāi)發(fā)那個(gè)小伙子（就是那些使用 PHP、Ruby、.NET、GoldFusion 等等語(yǔ)言的帥哥們）開(kāi)小差去了，也許是他忙于其它事情?？傊?dāng)這個(gè)請(qǐng)求發(fā)出的時(shí)候我不能得到我想要的結(jié)果，我只能得到一個(gè) 404 (Not Found) 錯(cuò)誤。

這實(shí)在是很糟糕，催促也沒(méi)有用，旁邊的測(cè)試人員吵著鬧著要測(cè)試呢，而我自己也迫切希望看到立竿見(jiàn)影的效果。這個(gè)時(shí)候，就只能依靠自己了，其中一個(gè)比較好的方法就是模擬 Ajax 請(qǐng)求，這里我使用 jQuery Mockjax 插件。

地址：jQuery Mockjax

這是一個(gè) jQuery 插件，將其下載下來(lái)引用的時(shí)候放在 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>

然后在請(qǐng)求代碼之前執(zhí)行模擬請(qǐng)求的代碼，使用該插件提供的 $.mockjax() 方法，暫時(shí)先指定2個(gè)參數(shù) url 和 responseText：

$.mockjax({
url: '/products/',
responseText: 'Here you are!'
});

它會(huì)監(jiān)測(cè)具有相同 url 的 Ajax 請(qǐng)求并在請(qǐng)求發(fā)出時(shí)攔截同時(shí)模擬響應(yīng)，responseText 的值就是模擬的響應(yīng)內(nèi)容，這樣我的程序就能愉快地執(zhí)行了，最開(kāi)始那個(gè)例子的運(yùn)行結(jié)果就是 'Here you are' 這段內(nèi)容將會(huì)顯示到 div#result 中。當(dāng)我不再需要模擬請(qǐng)求的時(shí)候可以使用 $.mockjax.clear() 方法清除掉：

$.mockjax.clear();

一旦后臺(tái)服務(wù)開(kāi)發(fā)完成，我就可以使用該方法清除掉所有模擬請(qǐng)求體驗(yàn)真實(shí)的請(qǐng)求效果了。如果不希望一次性清除掉所有的模擬請(qǐng)求，而是針對(duì)某個(gè)模擬請(qǐng)求，可以傳入該模擬請(qǐng)求的 ID，每個(gè)模擬請(qǐng)求都會(huì)返回一個(gè) ID 值：

var idOne = $.mockjax({ }),
idTwo = $.mockjax({ });
$.mockjax.clear(idTwo);

這樣就把第二個(gè)模擬請(qǐng)求清除掉了，保留了第一個(gè)。

由于 Ajax 請(qǐng)求的 url 地址要和模擬請(qǐng)求的 url 對(duì)應(yīng)，假設(shè)頁(yè)面上有很多請(qǐng)求，每個(gè)請(qǐng)求都去模擬的話(huà)就會(huì)感覺(jué)很痛苦，好在，該插件的 url 參數(shù)提供了一個(gè)通配符 * 方式：

$.mockjax({
url: '/books/*'
});

這樣除了可以匹配 url 地址為 /books/cook 的請(qǐng)求還可以匹配地址為 /books/math 等等更多請(qǐng)求，甚至還可以使用正則表達(dá)式進(jìn)行更復(fù)雜的匹配模式：

$.mockjax({
url: /^\/data\/(cook|math)$/i
});

使用插件的 data 參數(shù)可以根據(jù)不同的請(qǐng)求數(shù)據(jù)執(zhí)行不同的模擬響應(yīng)：

$.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!"
}
});

就算是同一個(gè) url 地址當(dāng)請(qǐng)求的數(shù)據(jù)不同的時(shí)候獲得的響應(yīng)內(nèi)容也不一樣。響應(yīng)內(nèi)容除了純文本字符串，也可以使用 json
格式的字符串。

該插件還提供了一個(gè)默認(rèn)參數(shù)設(shè)置對(duì)象 $.mockjaxSettings，沒(méi)有指定的參數(shù)都將使用這些默認(rèn)值：

$.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'
}
};

將默認(rèn)值修改之后，后面的模擬請(qǐng)求都會(huì)使用修改后的值：

$.mockjaxSettings.contentType = "application/json";

這里只修改了其中的 contentType 的默認(rèn)值。

以上所述通過(guò)實(shí)例詳解jQuery Mockjax 插件模擬 Ajax 請(qǐng)求的相關(guān)知識(shí)，希望對(duì)大家有所幫助。

相關(guān)文章

最新評(píng)論