s-hiroshi/async.html

## async.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>event test sample</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" media="all">
<script src="http://code.jquery.com/qunit/git/qunit.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="common.js"></script>
<script src="utility.js"></script>
<script src="async.js"></script>
<script src="async_test.js"></script>
</head>
<body>
<h1 id="qunit-header">event test sample</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup, will be hidden</div>
</body>
</html>

## async.js
jQuery(function($) {
    /**
     * jQuery.ajaxを使った非同期通信を行う。イベントをテストする。
     */
    var async = Common.namespace('async');

    (function() {

        // サーバーからのレスポンス
        var response;

        /**
         * サーバーのレスポンスを設定する。
         * @param {String} res
         */
        function setResponse(res) {
            response = res;
        }

        /**
         * response変数を返す。responseはサーバーのレスポンスを格納する。
         *
         * @return {String} response
         */
        function getResponse() {
            return response;
        }

        // Ajaxを使った通信
        function send(e) {

            var data = {
                'sample': arguments[1]
            };
            var url = './ajax.php';
            var encodedata = Utility.getEncodedUri(data);

            $.ajax({
                type: 'POST',
                url: url,
                data: encodedata,
                success: function(data) {
                    setResponse(data);
                    return true;
                }
            });

        }

        /**
         * イベントハンドラを設定する。
         *
         * @param {Element} elem
         */
        function setSend(elem) {
            $(elem).bind('click', send);
        }

        // パブリックメソッド
        async.setSend = setSend;
        async.setResponse = setResponse;
        async.getResponse = getResponse;
    }());
});

## async.php
<?php
    $value = $_POST["sample"];
    header("Content-Type: text/html; charset=UTF-8");
    echo htmlspecialchars($value . '_ajax');
?>

## async_test.js
jQuery(function($){
    // Qunit test
    asyncTest("非同期なイベントハンドラのテスト", function(){
        var async = Common.namespace('async');

        var form = $('<form>').attr('action', 'POST');
        var input = $('<input type="text" name="sample" value="sample">');
        var submit = $('<input id="send" type="submit" value="送信">');

        async.setSend(submit.get(0));
        submit.triggerHandler('click', [input.val()]);
        setTimeout(function(){
            start();
            equal(async.getResponse(), 'sample_ajax', "submitボタンのclickイベントでAjax通信を行う。レスポンスはクエリーの末尾に_ajaxを追加した文字。");
        },1000);
    });
});

## common.js
/*
 * 名前空間を提供する。トップレベルオブジェクト
 *
 * <p>Christian Johansen(著),長尾高弘(翻訳)『テスト駆動JavaScript』ASCII
 * 下記サイトで配布されているスクリプトを変更。</p>
 * <p>http://tddjs.com/</p>
*/
function Common() {}
/**
 *  名前空間を設定・管理する。
 *
 *  <p>引数に対応する既存のオブジェクトが存在するときは
 *  そのオブジェクトを返す。存在しないときは空のオブジェクト作成・登録してして返す。
 *  </p>
 *
 *  @param {String} name オブジェクト名
 *  @return {Object} 引数の文字列とマッチするオブジェクト
 */
Common.namespace = (function() {
    var objectList = {};
    return function(name) {
        if (typeof objectList[name] == "undefined") {
            objectList[name] = {};
        }
        return objectList[name];
    };
}());

## utility.js
function Utility() {}
/**
 * 引数パーセントエンコードして文字列として返す。
 * <pre>
 * 引数のオブジェクト
 * {
 *     key1: value1,
 *     key2: value2
 * }
 * 戻り値の文字列
 * encodedKey1=encodedValue1&encodedkey2=encodedValue12
 * encodedKeyはkeyをパーセントエンコードした文字列
 *
 * @param {Object} obj ポストデータのクエリ
 * @return {String} ポストデータをパーセントエンコードした文字列
 */
Utility.getEncodedUri = function(obj) {
    var params = [],
        key,
        value,
        param;
    for (key in obj) {
        value = obj[key];
        // パーセントエンコーディングの半角スペース%20を+へ置換
        param = encodeURIComponent(key).replace(/%20/g, '+') + '=' + encodeURIComponent(value).replace(/%20/g, '+');
        params.push(param);
    }
    return params.join('&');
};
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>event test sample</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" media="all">
	<script src="http://code.jquery.com/qunit/git/qunit.js"></script>
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="common.js"></script>
	<script src="utility.js"></script>
	<script src="async.js"></script>
	<script src="async_test.js"></script>
	</head>
	<body>
	<h1 id="qunit-header">event test sample</h1>
	<h2 id="qunit-banner"></h2>
	<div id="qunit-testrunner-toolbar"></div>
	<h2 id="qunit-userAgent"></h2>
	<ol id="qunit-tests"></ol>
	<div id="qunit-fixture">test markup, will be hidden</div>
	</body>
	</html>
	jQuery(function($) {
	/**
	* jQuery.ajaxを使った非同期通信を行う。イベントをテストする。
	*/
	var async = Common.namespace('async');

	(function() {

	// サーバーからのレスポンス
	var response;

	/**
	* サーバーのレスポンスを設定する。
	* @param {String} res
	*/
	function setResponse(res) {
	response = res;
	}

	/**
	* response変数を返す。responseはサーバーのレスポンスを格納する。
	*
	* @return {String} response
	*/
	function getResponse() {
	return response;
	}

	// Ajaxを使った通信
	function send(e) {

	var data = {
	'sample': arguments[1]
	};
	var url = './ajax.php';
	var encodedata = Utility.getEncodedUri(data);

	$.ajax({
	type: 'POST',
	url: url,
	data: encodedata,
	success: function(data) {
	setResponse(data);
	return true;
	}
	});

	}

	/**
	* イベントハンドラを設定する。
	*
	* @param {Element} elem
	*/
	function setSend(elem) {
	$(elem).bind('click', send);
	}

	// パブリックメソッド
	async.setSend = setSend;
	async.setResponse = setResponse;
	async.getResponse = getResponse;
	}());
	});
	<?php
	$value = $_POST["sample"];
	header("Content-Type: text/html; charset=UTF-8");
	echo htmlspecialchars($value . '_ajax');
	?>
	jQuery(function($){
	// Qunit test
	asyncTest("非同期なイベントハンドラのテスト", function(){
	var async = Common.namespace('async');

	var form = $('<form>').attr('action', 'POST');
	var input = $('<input type="text" name="sample" value="sample">');
	var submit = $('<input id="send" type="submit" value="送信">');

	async.setSend(submit.get(0));
	submit.triggerHandler('click', [input.val()]);
	setTimeout(function(){
	start();
	equal(async.getResponse(), 'sample_ajax', "submitボタンのclickイベントでAjax通信を行う。レスポンスはクエリーの末尾に_ajaxを追加した文字。");
	},1000);
	});
	});
	/*
	* 名前空間を提供する。トップレベルオブジェクト
	*
	* <p>Christian Johansen(著),長尾高弘(翻訳)『テスト駆動JavaScript』ASCII
	* 下記サイトで配布されているスクリプトを変更。</p>
	* <p>http://tddjs.com/</p>
	*/
	function Common() {}
	/**
	* 名前空間を設定・管理する。
	*
	* <p>引数に対応する既存のオブジェクトが存在するときは
	* そのオブジェクトを返す。存在しないときは空のオブジェクト作成・登録してして返す。
	* </p>
	*
	* @param {String} name オブジェクト名
	* @return {Object} 引数の文字列とマッチするオブジェクト
	*/
	Common.namespace = (function() {
	var objectList = {};
	return function(name) {
	if (typeof objectList[name] == "undefined") {
	objectList[name] = {};
	}
	return objectList[name];
	};
	}());
	function Utility() {}
	/**
	* 引数パーセントエンコードして文字列として返す。
	* <pre>
	* 引数のオブジェクト
	* {
	* key1: value1,
	* key2: value2
	* }
	* 戻り値の文字列
	* encodedKey1=encodedValue1&encodedkey2=encodedValue12
	* encodedKeyはkeyをパーセントエンコードした文字列
	*
	* @param {Object} obj ポストデータのクエリ
	* @return {String} ポストデータをパーセントエンコードした文字列
	*/
	Utility.getEncodedUri = function(obj) {
	var params = [],
	key,
	value,
	param;
	for (key in obj) {
	value = obj[key];
	// パーセントエンコーディングの半角スペース%20を+へ置換
	param = encodeURIComponent(key).replace(/%20/g, '+') + '=' + encodeURIComponent(value).replace(/%20/g, '+');
	params.push(param);
	}
	return params.join('&');
	};