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

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

【プログラミング 57時間目】JavaScriptでXMLを読み込もうとしたけどうまくいかない*1

スポンサーリンク

サーブレット&JSPコンプリートマスター

サーブレット&JSPコンプリートマスター


サーブレットJSPの基礎を学んだあとに、基礎を実践で役立つ技術に昇華させるための良い本だと思います。
ただひとつ、とっても気になるのは、著者を「Auther」と書いているところです。
正しくは、Authorです。他にも英語のスペルミスがあって、そこは少し気になる所。

あと、サンプルソースを打ち込んでもうまく動かなくて、苦戦中です。
2時間経過したので別のことやる。

★★
Ajaxとは、Asyncronous JavaScript and XMLのことです。
ユーザーに対してスムーズなレスポンスを実現するためのJavaScriptを中心とした技術です。

Webブラウザに実装されているJavaScriptのHTTP非同期通信機能を使って、Webページのリロードを伴わずにサーバとXML形式のデータのやり取りを行なって処理を進めていく技術のこと。


XMLを読み込んでブラウザに表示したい。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Windows-31J">
<title>XMLを読み込んでみる</title>
</head>
<script type="text/javascript">


function transaction(){

	
	xmlhttp = this.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");
	
	//onreadystatechangeはコールバック関数を設定する。
	//コールバック関数とは、XMLHTTPオブジェクトの状態が変化したら自動実行されるJavaScript関数のこと。
	xmlhttp.onreadystatechange = display;
	
	//xmlhttp.open('GET','http://localhost:8082/webtest/ajaxsample.xml',false);
	xmlhttp.open('GET','ajaxsample.xml',false);
	
	xmlhttp.send(null);
}

//コールバック関数(サーバーからレスポンスがあったときの関数のこと)
function display() {
	html = "<table border=\"1\"><tr><th>名前</th><th>身長</th><th>体重</th></tr>";
	
	alert(xmlhttp.readyState);
	
	if (xmlhttp.readyState == 4) {
		xml = xmlhttp.responseXML;
		for(i = 0;i < xml.getElementByTagName("person").length;i++) {
			person = xml.getElementsByTagName("person")[i];
			html += "<tr>";
			html += "<td>" + person.childNodes.item(0).firstChild.nodeValue + "</td>";
			html += "<td>" + person.childNodes.item(1).firstChild.nodeValue + "</td>";
			html += "<td>" + person.childNodes.item(2).firstChild.nodeValue + "</td>";
			html += "</tr>";
		}
	}
	
	document.getElementById("result").innerHTML = html;
}
</script>
</head>
<body>
<form>
<input type="button" id="bt1" value="登録された人を表示する" onClick="transaction()">
</form>
<div id="result"></div>
</body>
</html>
			


どうもうまくいかず、responseXMLの返り値がNullになる。
JavaScriptのテキストの読み込みのURLの指定がたぶんおかしいので、テキストの読み込み部分の知識を補完する必要がある。

JavaScriptは難しい・・・。

読み込もうとしたXML

<?xml version="1.0" encoding="Windows-31J" ?>

<!DOCTYPE persons [
  <!ELEMENT persons (person+)>
  <!ELEMENT person (name,height,weight)>
  <!ELEMENT name (#PCDATA)>
  <!ELEMENT height (#PCDATA)>
  <!ELEMENT weight (#PCDATA)>
]>


<persons>
	<person>
		<name>"mizky"</name>
		<height>176</height>
		<weight>67</weight>
	</person>
	<person>
		<name>"tkk"</name>
		<height>170</height>
		<weight>64</weight>
	</person>
</persons>