Ajax request_jquery をシミュレートする jQuery Mockjax プラグインの詳細な例-jsチュートリアル-php.cn

Ajax request_jquery をシミュレートする jQuery Mockjax プラグインの詳細な例

WBOY

リリース： 2016-05-16 15:20:37

オリジナル

1280 人が閲覧しました

原則

jquery-mockjax は、フロントエンド Ajax リクエストのバックグラウンドへの戻りデータを模擬するために使用されます。

原理は非常にシンプルです

Ajax リクエストを送信したい js コードにブレークポイントを置き、[jquery-mockjax が導入されている場合] と [jquery-mockjax が導入されていない場合] の $.ajax.toString() の値を比較します。

明らかに、jquery-mockjax が導入されると、このモックライブラリは jquery が提供する ajax 関数を置き換えます。これにより、嘲笑が容易になります。

実際の開発プロセスでは、フロントエンドとバックエンドが統一インターフェイスをネゴシエートし、それぞれが独自のタスクを開始しました。現時点では、バックグラウンドからデータを取得する必要がある次のような Ajax リクエストがあります。

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

ログイン後にコピー

しかし、このサービスはまだ作成されていない可能性があります。おそらく、バックエンドを開発した人 (PHP、Ruby、.NET、GoldFusion などを使用するハンサムな男性) が辞めたか、他のことで忙しいのかもしれません。とにかく、このリクエストが行われると、期待する結果は得られず、404 (Not Found) エラーが発生するだけです。

これは本当にひどいもので、促しても無駄です。私の隣のテスターはテストするよううるさく言っていて、私はすぐに結果が知りたいと思っています。現時点では、自分自身に頼るしかありません。より良い方法の 1 つは、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 リクエストを監視し、リクエストが発行されたときにレスポンスをインターセプトしてシミュレートします。そのため、私のプログラムは問題なく実行できます。こちらです。この内容は div#result に表示されます。リクエストをモックする必要がなくなったら、$.mockjax.clear() メソッドを使用してリクエストをクリアできます:

$.mockjax.clear();

バックグラウンドサービスの開発が完了したら、このメソッドを使用してすべてのシミュレートされたリクエストをクリアし、実際のリクエストの効果を体験できます。すべてのシミュレーションリクエストを一度にクリアするのではなく、特定のシミュレーションリクエストをターゲットにする場合は、シミュレーションリクエストの ID を渡すと、各シミュレーションリクエストが ID 値を返します:

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

ログイン後にコピー

これにより、2 番目のシミュレーションリクエストがクリアされ、最初のシミュレーションリクエストが保持されます。

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 のデフォルト値のみが変更されます。

上記では、Ajax リクエストをシミュレートするための jQuery Mockjax プラグインの関連知識を例を通して説明しました。