Connection: setFormでformを送る

Javascript YUI Ajax XHR

YUIのExampleのページには、あまり基本的で面白い例があがっていないのだが、Connection ManagerはAjaxの肝の部分なので、ここでもYUIのページから離れて、FormをGETメソッドとPOSTメソッドで送る例を作ってみた。

まず、以下のようなform要素を含む画面を用意。

form要素としては、text入力、radioボタン、リストボックスの３種類。
これらを以下のように編集して、「POSTで送信」、「GETメソッド送信」で送るを押すと、入力値をphpで取り出して、平文でresponseするというもの。

レスポンスは、コールバック関数内で、responseTextとしてとり出して、画面に以下のように編集する。

これだけの簡単なものだ。
phpで3秒間、responseをdelayさせて、その間にありがちな「待ってますよ画像（）」を表示する。
phpは、ローカルマシンにセットアップしたphp5.2.6(Windows版)を使用した、apacheもローカルマシンにある2.2.9（Windows版）。

まず、javascriptを含むhtml全体を以下に挙げる。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>Ajax_Sampling</TITLE>
<style type="text/css">
#wait {
    width: 18px;
    height: 18px;
}

#testForm {
    width: 400px;
    padding: 3px;
    background-color: olive;
    border: 1px solid green;
}

#result {
    width: 500px;
    padding: 3px;
    background-color: #6D739A;
    color: white;
    border: 1px solid black;
}
</style>

<!-- 読み込むjs --> 
<script type="text/javascript" src="scripts/yui/yahoo/yahoo-min.js" >
</script> 
<script type="text/javascript" src="scripts/yui/yahoo-dom-event/yahoo-dom-event.js" >
</script> 
<script type="text/javascript" src="scripts/yui/connection/connection-min.js" >
</script> 

<script type="text/javascript">
// namespaceの定義
YAHOO.namespace('EGP');

var ajaxHandlers=YAHOO.EGP.ajaxHandlers;
var ajaxCallback=YAHOO.EGP.ajaxCallback;
var btnHandlers=YAHOO.EGP.btnHandlers;

//Ajaxハンドラー
ajaxHandlers =　{
	
	// 受信成功時の処理
	responseSuccess:function(oj){
		// wait画像を消す。
		YAHOO.util.Dom.get('wait').innerHTML='';
		// 取得したデータの表示
		YAHOO.util.Dom.get('result').innerHTML=oj.responseText;
	},

	// 受信失敗時の処理
	responseFailure:function(oj){
		// wait画像を消す。
		YAHOO.util.Dom.get('wait').innerHTML='';

		// backgroudを赤にする
		YAHOO.util.Dom.setStyle('result',
				'background-color','red');
		// ajaxCallbackに定義したargumentを使ってみる。
		var sFailure=oj.argument.ng + 
						'  ステータス: ' + oj.status +
		 				'\n' + 'ステータステキスト: ' + oj.statusText;
		
		// レスポンスオブジェクトの表示
		YAHOO.util.Dom.get('result').innerHTML=sFailure;
	},

	// Postで送信する。
	startPostRequest :function(url){
		// フォームの内容を保存
		YAHOO.util.Connect.setForm("testForm");
		// POSTする
		YAHOO.util.Connect.asyncRequest('POST',url,
				ajaxCallback, null);
		// wait画像の表示
		YAHOO.util.Dom.get('wait').innerHTML="<img src='./images/wait.gif'/>";
	},

	// Getで送信する。
	startGetRequest :function(url){
		// フォームの内容を保存
		YAHOO.util.Connect.setForm("testForm");
		// POSTする
		YAHOO.util.Connect.asyncRequest('GET',url,
				ajaxCallback, null);
		// wait画像の表示
		YAHOO.util.Dom.get('wait').innerHTML="<img src='./images/wait.gif'/>";
	} 		
};

// コールバック成功/失敗時の振り分け
ajaxCallback =
{
	success:ajaxHandlers.responseSuccess,
	failure:ajaxHandlers.responseFailure,
	argument:{
		ng:"受信に失敗しました"
	},
	// cache: falseのしないと、HttpServerがajax_test.txt
	// の内容をcacheしてしまう。
	cache: false,
	scope: ajaxHandlers
};

// Buttonの処理（POST）
// ボタンハンドラを定義
btnPostHandlers =
{
	click:function(){
		ajaxHandlers.startPostRequest('ajax_yui_connection_setPostForm1.php')
	}
}
//ボタンにイベントを仕掛ける。btnPostがAvailableになってからだよ。
YAHOO.util.Event.onAvailable('btnPost',
	function() {
		YAHOO.util.Event.on('btnPost','click',
				btnPostHandlers.click);
	}
);

//Buttonの処理（Get）
//ボタンハンドラを定義
btnGetHandlers =
{
	click:function(){
		ajaxHandlers.startGetRequest('ajax_yui_connection_setGetForm1.php');
	}
}
//ボタンにイベントを仕掛ける。btnGetがAvailableになってからだよ。
YAHOO.util.Event.onAvailable('btnGet',
	function() {
		YAHOO.util.Event.on('btnGet','click',
				btnGetHandlers.click);
	}
);

</script>

</HEAD>
<BODY>
<p>
「GETで送信」、「POSTで送信」のボタン選んで押してください。<br/>
データを送信して、戻ってきます。
</p>
<form id="testForm">
<div id='wait'></div>
名前；<input type="text" name="name" value="ジョージ" />
<br/>
<br/>
性別；<input type="radio" name="sex" value="male" checked /> man 
&nbsp
<input type="radio" name="sex" value="female" /> woman
<br/>
<br/>
<select name="sel">
	<option value="1">test1</option>
	<option value="2">test2</option>
	<option value="3">test3</option>
</select>
<br/>
<br/>
<br/>
<br/>
<br/>
<input id='btnPost' type='button' value='POSTで送信'/>
&nbsp
<input id='btnGet' type='button' value='GETで送信' />
</form>
</p>
<!-- 以下に結果を表示します。-->
<div id="result">
ここに結果を表示します。
</div>
</BODY>
</HTML>

POSTとGETをハンドルする部分が冗長になっているが、サンプルということで、理解いただきたい。
以下に、上から呼び出す2つのphpプログラムを掲載しておく。

<?php
/* ajaxサンプル。
	      
		author	; t.odaka
		date	; 2008/10/30
*/

	// データを受信
	$data = "名前；".sanitize($_POST["name"],"UTF-8")."<br>";
	$data .= "性別；".sanitize($_POST["sex"],"UTF-8")."<br>";
	$data .= sanitize($_POST["sel"],"UTF-8");

	// 3秒待つ ; responseが戻るまでの間、動画gifを出すデモのため。
	sleep(3);
	
	// 出力
	echo($data);

	// 入力データのサニタイズを行います //
	function sanitize($var,$encoding){
		$ret = htmlentities($var,ENT_QUOTES,$encoding);
		return $ret;
	}

?>

<?php
/* ajaxサンプル。
	      
		author	; t.odaka
		date	; 2008/10/30
*/

	// データを受信
	$data = "名前；".sanitize($_GET["name"],"UTF-8")."<br>";
	$data .= "性別；".sanitize($_GET["sex"],"UTF-8")."<br>";
	$data .= sanitize($_GET["sel"],"UTF-8");

	// 3秒待つ ; responseが戻るまでの間、動画gifを出すデモのため。
	sleep(3);
	
	// 出力
	echo($data);

	// 入力データのサニタイズを行います //
	function sanitize($var,$encoding){
		$ret = htmlentities($var,ENT_QUOTES,$encoding);
		return $ret;
	}

?>