JavaScriptでXMLをParseする（その２）

Javascript YUI XHR XML

Jajascriptを使って、クライアントサイド（つまり、ブラウザー上）でXMLをParseするというケースで、一番考えられるのは、マッシュアップだと思う。

この場合には、

  • 整形式のXML
  • REST
  • 各種文書からXMLの形式についての情報がえられる。得られない場合は、（正規の手続きさえ行えば）GETでクエリーを投げることで、情報を得ることができる。

という前提がある。

この前提の元で、先の例から、W3Cのインターフェイス定義を用いて「中途半端に一般的なコード」を書くのは、戦略的に得ではないことは明らかである。

Javascriptで書くにしても、必要な情報だけを、タグ名指定でgetElementsByTagName()で取得してしまうか、ツールをつかってpath形式で取得するのがよいだろう。

「ええもん屋 ラボ」というサイトにxmlparserというツールがあるのを見つけた。
2006年からメンテナンスされていないようだが、これを使ってみた結果を以下に示す。

YUIのConnection Managerで取得するデータは、先の例と同じ、以下のものである。

<?xml version="1.0" encoding="utf-8"?>
<testdata>
<company>
	<name>
		ほげほげ（株）
	</name>
	<place>
		ほげほげ県ほげほげ市1-1
	</place>
	<domain>
		電気
	</domain>
	<salesman>
		<sname>ほげ山ほげ夫</sname>
		<sphone>
			<snumber>090-0000-0000</snumber>
			<snumber>090-1111-1111</snumber>
		</sphone>
		<sname>ほげ田ほげ彦</sname>
		<sphone>
			<snumber>090-2222-2222</snumber>
		</sphone>
	</salesman>
</company>
<company>
	<name>
		あらら（株）
	</name>
	<place>
		あらら県あらら市1-1
	</place>
	<domain>
		機械
	</domain>
	<salesman>
		<sname>あら山あら夫</sname>
		<sphone>
			<snumber>090-3333-33333</snumber>
		</sphone>
		<sname>あら田あら彦</sname>
	</salesman>
</company>
</testdata>

詳細は、「ええもん屋」さんのサイトを参照いただきたいが、このツールはAmazon EC用に作られたもののようで、時期的に2006年というと、マッシュアップでアフィリエイトとかが流行っていた時代。
path指定で、XMLのタグ属性、テキストノードの値が取得できる。
こういうシンプルなものはいい。

このツールを使って、以下の実験をした。

実験0 パースした結果をダンプする。
実験1 パスを指定して会社名を取得する。

画面は以下のようなものを準備。

実験結果の画面は、以下となった。

サイトのマニュアルにあるように、キチンと会社名が取得できていることがわかる。
以下に、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">
.output {
    width: 500px;
    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> 
<!-- xmlparser.js -->
<!-- http://ecs.amonya.com/download/javascript/xmlxmlparserjs.html -->
<script type="text/javascript" src="scripts/xmlparser.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){
		//	実験0		
		// 取得したデータの表示
		var xml0	=	XMLParser.parse(oj.responseXML.documentElement);
		YAHOO.util.Dom.get('output_0').innerHTML += xml0.dumpHTML();

		//	実験1		
		var wk = xml0.path('testdata->company->0->name');
		YAHOO.util.Dom.get('output_1').innerHTML += wk.value;

	},

	// 受信失敗時の処理
	responseFailure:function(oj){
		// backgroudを赤にする
		YAHOO.util.Dom.setStyle('output_0',
				'background-color','red');
		var sFailure='ステータス: ' + oj.status +
		 				'\n' + 'ステータステキスト: ' +
						oj.statusText +
						'\n' +'読み込みに失敗しました。';
		// 
		// 非表示
		YAHOO.util.Dom.setStyle('output_1',
				'visibility','hidden');
	},

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

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

// Buttonの処理
// ボタンハンドラを定義
btnHandlers =
{
	click:function(){
		ajaxHandlers.startRequest("data/ajax_test2.xml")
	}
}
//ボタンにイベントを仕掛ける。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_test2.xmlを取得して、内容を表示します。
<li>取得の成功、失敗に関わらず、レスポンスオブジェクトのプロパティーを表示します。
</ul>
</p>
<div>
<input id="btn" type="button" value="実行" />

</div>
<p>
<div id="output_0" class="output">
実験結果0<br/>
</div>
</p>
<p>
<div id="output_1" class="output">
実験結果１<br/>
</div>
</p>
</BODY>
</HTML>

メンテナンスがされていないようなのが残念だが、使えそうなツールである。