感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

【プログラミング136.5時間目】JavaScriptでXMLファイルを読み込む

スポンサーリンク

昨日に引き続き、JavaScriptの勉強をした。
読んだのは「HTML5 JavaScript CSS3 アプリケーション開発入門」
という本。
「いま必要な知識」がコンパクトにまとめられていて、とてもお得な本だと読んでて思う。
コンパクトだけど、わかりやすい。

Ajaxは、JavaScriptを通じてサーバーと動的に通信することでこれまでの静的なHTMLページをより動的でインタラクティブなものに変えようとする試みである。

この XML ファイルにはスタイル情報が関連づけられていないようです
というエラーがでたときに、
XMLファイルのスタイルを確認するのは以下。
http://www.w3.org/RDF/Validator/

JavaScriptXMLファイルを読み込むサンプル。
手元のXMLファイルは読み込めたけど、サーバーのXMLはうまく読み込めない。
responseXML.documentElementがnullになってしまう。
なぜだろう。

またIEとChromeはHTTPプロトコルで通信を行ったときにだけXMLHttpRequestが動作するため、
手元のファイルを「file:///C:/Users/〜」みたいに読み込もうとしても、fileプロトコルで指定されたファイルにはアクセスできない。

・読み込む手元のXMLファイル

<?xml version="1.0" encoding="Shift_JIS"?>
<list>
	<member>
		<name>イケダハヤトさん</name>
		<personality>負けず嫌い。やまもといちろうとケンカした</personality>
	</member>
	<member>
		<name>女MGさん</name>
		<personality>女版ノマド先駆者。いまは何してるんだろう?</personality>
	</member>
	<member>
		<name>elm200さん</name>
		<personality>パブリックマン宣言にびっくりした</personality>
	</member>
</list>

XMLファイルを読み込むJavaScript

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>JavaScriptでXMLファイルをを読み込む</title>

<body>
<script language="JavaScript">

function creHR() {
	return new window.XMLHttpRequest();
}

function requestFile(data, method, fname, async) {
	//XMLHttpRequestオブジェクトを生成
	var HttpObject = creHR();
	//openメソッドでXMLファイルを開く
	HttpObject.open(method, fname, async);
	
	//無名functionによるイベント処理
	HttpObject.onreadystatechange = function() {
		if (HttpObject.readyState == 4) {
			//コールバック
			CB(HttpObject);
		}
	}
	
	//データの送信
	HttpObject.send(data);
}

	
//コールバック
function CB(HttpObj) {
	var resHTTP = HttpObj.responseXML.documentElement;
	memberList = resHTTP.getElementsByTagName('member');
	
	memberName = resHTTP.getElementsByTagName('name');
	memberPersonal = resHTTP.getElementsByTagName('personality');
	
	document.getElementById("canvas").innerHTML = 
		memberList.length + "個のデータがあります<br /><br />";
	
	//ノードの数だけループ
	for(i = 0; i < memberList.length; i++) {
		document.getElementById("canvas").innerHTML +=
			memberName[i].childNodes[0].nodeValue + " / ";
		document.getElementById("canvas").innerHTML +=
			memberPersonal[i].childNodes[0].nodeValue + "<br /> ";
		document.getElementById("canvas").innerHTML += "<hr />";
	}
	
}

</script>

<form>
ボタンを押すとxmlファイルを読み込んでdivに表示する<br/>
<input type="button" value="通信開始"
	onclick="requestFile(null, 'GET', 'test.xml', true)">
</form>

<div id="canvas"></div>
</body>
</html>

これでXMLを読み込んでブラウザに表示することができる。