Hatena::ブログ(Diary)

放浪するエンジニアの覚え書き このページをアンテナに追加 RSSフィード

2010-09-22

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

| 07:39 |  jQuery1.4.2; サーバーからhtml(テキスト)を読み込む。 - 放浪するエンジニアの覚え書き のブックマークコメント

以前にも書いたことがあるが、Ajaxというのは紛らわしい言葉で、Ajaxライブラリーというと、Javascriptによる(サーバーとの)非同期通信(Ajax=Asynchronous javascript and XML)という意味と、エフェクトという意味の2つを大きく含んでいる。非同期通信という部分も、本来的には「javascriptによるXMLをつかった非同期な通信」ということだが、JSONYAMLシリアライズしたPHPオブジェクトといったデータフォーマットがLLからハンドルしやすいということもあって、多くのWebサービス(Web API)で利用されるようになっている(「Restfulアーキテクチャ」というと、HTTPメソッドと処理の在り方といったレベルの話になってしまうので、ここでいうRESTとは、GET/POSTによって、データを参照するという意味)。

このログでは、Ajaxを「データフォーマットに関係なく、サーバーからHTTPプロトコルを使って、簡易にデータをやり取りすること」と定義しておく。jQueryも、DOM操作やイベントハンドル、XHRといった部分を本体のJSで、エフェクトやユーティリティーをjQuery UIといった名前で別々に配布している。

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

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

<ul>
<li> テスト1
<li> テスト2
<li> テスト3
</ul>

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

f:id:tetsuya_odaka:20100921101358p:image

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

f:id:tetsuya_odaka:20100921101658p:image

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

<!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>