jQuery1.4.2; サーバーからhtml（テキスト）を読み込む。

jQuery Ajax XHR

以前にも書いたことがあるが、Ajaxというのは紛らわしい言葉で、Ajaxライブラリーというと、Javascriptによる（サーバーとの）非同期通信（Ajax=Asynchronous javascript and XML）という意味と、エフェクトという意味の２つを大きく含んでいる。非同期通信という部分も、本来的には「javascriptによるXMLをつかった非同期な通信」ということだが、JSONやYAML、シリアライズしたPHPオブジェクトといったデータフォーマットがLLからハンドルしやすいということもあって、多くのWebサービス（Web API）で利用されるようになっている（「Restfulなアーキテクチャ」というと、HTTPメソッドと処理の在り方といったレベルの話になってしまうので、ここでいうRESTとは、GET/POSTによって、データを参照するという意味）。
このログでは、Ajaxを「データフォーマットに関係なく、サーバーからHTTPプロトコルを使って、簡易にデータをやり取りすること」と定義しておく。jQueryも、DOM操作やイベントハンドル、XHRといった部分を本体のJSで、エフェクトやユーティリティーをjQuery UIといった名前で別々に配布している。

前置きが長くなったが、今回のサンプルは、サーバーから単純にhtmlファイルをとってきて、あらかじめしつらえたdivタグ内な表示するというもの。jQueryでXHRを利用した際には、取得したテキスト、ステータス、XMLHTTPRequesttオブジェクトの３つを引数にとるコールバック関数が定義できる。この部分はstacktrace.jpさんのサイトを参考にさせてもらった。

サンプルは、bodyがreadyになったタイミングで、/data下にある以下のファイル（test.txt）を読み込んで表示するだけのものである。

<ul>
<li> テスト１
<li> テスト２
<li> テスト３
</ul>

ブラウザーへの表示は、jQueryのload関数で行い、以下の画面を表示する。ここでのポイントは、load関数の場合、htmlファイルをdivタグ内にloadすると、その内容がパースされて正しくリストが表示される点。

以下のalertは、load関数に定義したコールバック関数で表示する。

以下がソースコードの全文である。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<title>サーバーからのテキストのload&call backテスト</title>
<script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript">// <![CDATA[

var TestObj = function(){

	return{
		init : function(){
		/*
		* id=resultにtest.txtを表示するのと一緒にコールバック関数の定義をしてみる。
		*
		*/
			$('#result').load('./data/test.txt',null,
				    function(responseText, status, XMLHttpRequest) {
		        		// 通信完了後に実行されるコールバック関数
		        		// 参考； stacktrace.jp http://stacktrace.jp/jquery/api/ajax/load.html
		        		alert("--- responseText ---\n"   + responseText + "\n"
		            		+ "--- status ---\n"         + status       + "\n"
		            		+ "--- XMLHttpRequest ---\n" + XMLHttpRequest
		        		);
					}
				);
		}
	};
}();

$('body').ready( function(){ // 
	TestObj.init(); 
	} );

// ]]></script>
</head>
<body>
<div id="result"></div>
</body>
</html>