Connection; YAHOO.util.Connect.asyncRequestとresponseTextのサンプル

Ajax YUI XHR

昨日は、YUIのConnection Managerについて、そのトップページを概観したが、飽きてきてしまったので、YUIのExampleから離れて、YUIのAjaxの機能を使った簡単なサンプルを作ってみる。
サンプリングするのは、Ajax機能そのもののYAHOO.util.Connect.asyncRequestの飛ばし方と、responseTextの見え方。

まず、htmlファイルをおいているディレクトリにdata/ajax_test.txtという平文（UTF-8）を作る。
内容は、

ほげほげ

と簡単なもの。

次に以下のような画面を用意する。

「実行」ボタンを押すと、ajax_test.txtが存在する場合、レスポンスヘッダーの内容と、responseTextの内容を表示する。（下）

次に、ファイル名を変えるなどして、ajax_test.txtが存在しない場合（エラーケース）の場合には、ステータスコードなどを表示して、以下のような画面を表示する。

注釈つきのソース全文を以下に示す。

<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">
#header_result {
    width: 400px;
    background-color: #566F4E;
    color: white;
    border: 1px solid black;
}

#output {
    width: 400px;
    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){
		// 取得したデータの表示
		YAHOO.util.Dom.get('output').innerHTML=oj.responseText;
		var sSuccess = 'ヘッダー: ' + oj.getAllResponseHeaders;
		// Http Headerの表示
		YAHOO.util.Dom.get('header_result').innerHTML=sSuccess;
	},

	// 受信失敗時の処理
	responseFailure:function(oj){
		// backgroudを赤にする
		YAHOO.util.Dom.setStyle('output',
				'background-color','red');
		YAHOO.util.Dom.get('output').innerHTML='失敗しました';

		// backgroudを赤にする
		YAHOO.util.Dom.setStyle('header_result',
				'background-color','red');
		var sFailure='ステータス: ' + oj.status +
		 				'\n' + 'ステータステキスト: ' +
						oj.statusText +
						'\n' +'読み込みに失敗しました。';
		// レスポンスオブジェクトの表示
		YAHOO.util.Dom.get('header_result').innerHTML=sFailure;
	},

	// テキストを読み込む
	startRequest :function(url){
		YAHOO.util.Connect.asyncRequest('GET',url,
				ajaxCallback, null);
	} 		
};

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

// Buttonの処理
// ボタンハンドラを定義
btnHandlers =
{
	click:function(){
		ajaxHandlers.startRequest("data/ajax_test.txt")
	}
}
//ボタンにイベントを仕掛ける。btnがAvailableになってからだよ。
YAHOO.util.Event.onAvailable('btn',
	function() {
		YAHOO.util.Event.on('btn','click',
				btnHandlers.click);
	}
);

</script>
</HEAD>
<BODY>
<p>
実行ボタンを押してください。<br/>
<ul>
<li>Serverのdata/ajax_test.txtを取得して、内容を表示します。
<li>取得の成功、失敗に関わらず、レスポンスオブジェクトのプロパティーを表示します。
</ul>
</p>
<div>
<input id="btn" type="button" value="実行" />

<!-- こういう書き方はやめよう。
<input id="submit_button" type="button" value="実行" 
	onclick="handles.startRequest('data/ajax_test.txt')"/>
-->

</div>
<p>
<div id="header_result">
レスポンスオブジェクトの返却値<br/>
</div>
</p>
<p>
<div id="output">
data/ajax_test.txtの内容<br/>
</div>
</p>
</BODY>
</HTML>