How to use MockJax #JavaScript

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>