##jQuery Mockjax: Ajax request mocking
MockjaxはAjaxのリクエストをインターセプトして返してあげるモックを作成するための、jQueryのプラグインです。
githubはこちら
Ajaxの処理を書いていると、コールバック関数の確認はサーバ側の処理がないと確認がとれないのですが、このプラグインを使えば
サーバ処理がなくてもJavascriptの動作確認ができるのでとても便利です。
なので今日は簡単に使い方を書いてみます。
##How to use
root --- index.html
|
|-lib
|-jquery-1.7.2.min.js
|-jquery.mockjax.js
サンプルということでindex.htmlにJavascriptも書いてしまいます。
単純にclick meというボタンを押すと、ajaxによりリクエストを飛ばして、mockjaxがインターセプトして返すレスポンスデータを表示するといった簡単なものです。
とても簡単なのでぜひやってみてください。
index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>How to use mockjax</title>
</head>
<body>
<input id="fire" type="button" value="click me!" />
<div id="content">
<div id='text'></div>
<div id='message'></div>
</div>
<script src="lib/jquery-1.7.2.min.js"></script>
<script src="lib/jquery.mockjax.js"></script>
<script type="text/javascript">
//send request**********************************************
//ボタンをクリックしたときにajaxでリクエストを送ってあげる。
$('#fire').click(
function(){
$.ajax( {
url : 'sample/test',
type : 'GET',
success : callback,
error:error,
datatype:'json'
});
}
);
//********************************************************
//callback*************************************************
//ajax リクエストの正常終了時のコールバック
function callback(data,status){
$('#text').html('text:' + data.text);
$('#message').html('message:' + data.message);
};
//ajax リクエストのエラー発生時のコールバック
function error(jqXHR, textStatus, errorThrown) {
console.log(textStatus);
};
//********************************************************
//モック関数************************************************
//mockjaxを定義する。
$.mockjax(
{
url: 'sample/test', // インターセプトするURLを書く
responseTime: 500, // 戻りの時間を書く。ここの時間を延ばせば、なかなかリクエストが返ってこないときのテストができる
responseText: { // 戻りのデータを書く。
text: 'text data',
message:'Hello mockjax!!'
}
}
);
//********************************************************
</script>
</body>
</html>