ホームページ > 記事 > ウェブフロントエンド > Ajax request_jquery をシミュレートする jQuery Mockjax プラグインの詳細な例
Ajax request_jquery をシミュレートする jQuery Mockjax プラグインの詳細な例
- WBOYオリジナル
- 2016-05-16 15:20:371232ブラウズ
原則
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";