21
20

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

How to use MockJax

Posted at

##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>
21
20
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
21
20

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?