JavaとAjaxでページを作る(3) - XMLからデータを取得する
前回までで、サーバーから非同期でテキストデータを取得する方法を紹介しました。今回は、サーバーからXMLデータを取得し、XMLの値をフォームにセットするサンプルです。
サンプルで使用するXMLデータはユーザの姓と名を持つシンプルなものです。
<?xml version="1.0" encoding="UTF-8" ?>
<user>
<lastname>Java</lastname>
<firstname>太郎</firstname>
</user>
<user>
<lastname>Java</lastname>
<firstname>太郎</firstname>
</user>
作成するのは姓と名の2つのテキストボックスとロードを行うためのボタンを持つ画面です。
テキストデータを取得する時との違いはまずresponseTextではなく、responseXMLからデータを取得する点です。responseXMLにはXMLDocumentオブジェクトが設定されているので、JavaScriptのDOM関数を使用して値を取得することができます。getElementsByTagName("lastname")関数でまず、引数のタグ名に該当するオブジェクトの配列を取得します。このサンプルでは同一のタグは一つしかないのでgetElementsByTagName("lastname")[0]としています。続いてchildNodes[0]として、lastnameタグのテキストノードを指定し、そのnodeValueであるJavaを取得しています。
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>javaとajaxでページを作る(3)-XMLからデータを取得する</title>
<script type="text/javascript"><!--
function loadData()
{
if(typeof window.XMLHttpRequest == "undefined" ||
typeof window.XMLHttpRequest == WobjectW)
{
try{
xhObj = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xhObj = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
xhObj.onreadystatechange = setForm;
}
else
{
xhObj = new XMLHttpRequest();
xhObj.onload = setForm;
}
xhObj.open("GET","user.xml",true);
xhObj.send(null);
}
function setForm()
{
if ((xhObj.readyState == 4) && (xhObj.status == 200))
{
data = xhObj.responseXML;
document.form1.lastname.value = data.getElementsByTagName("lastname")[0].childNodes[0].nodeValue;
document.form1.firstname.value = data.getElementsByTagName("firstname")[0].childNodes[0].nodeValue;
}
}
// --></script>
</head>
<body>
<h1>javaとajaxでページを作る(3)-XMLからデータを取得する</h1>
<form name="form1">
姓 <input type="text" name="lastname"/><br>
名 <input type="text" name="firstname"/><br>
<input type="button" value="ロード" onClick="loadData()"><br>
</form>
<div id="display"></div>
</body>
</html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>javaとajaxでページを作る(3)-XMLからデータを取得する</title>
<script type="text/javascript"><!--
function loadData()
{
if(typeof window.XMLHttpRequest == "undefined" ||
typeof window.XMLHttpRequest == WobjectW)
{
try{
xhObj = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xhObj = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
xhObj.onreadystatechange = setForm;
}
else
{
xhObj = new XMLHttpRequest();
xhObj.onload = setForm;
}
xhObj.open("GET","user.xml",true);
xhObj.send(null);
}
function setForm()
{
if ((xhObj.readyState == 4) && (xhObj.status == 200))
{
data = xhObj.responseXML;
document.form1.lastname.value = data.getElementsByTagName("lastname")[0].childNodes[0].nodeValue;
document.form1.firstname.value = data.getElementsByTagName("firstname")[0].childNodes[0].nodeValue;
}
}
// --></script>
</head>
<body>
<h1>javaとajaxでページを作る(3)-XMLからデータを取得する</h1>
<form name="form1">
姓 <input type="text" name="lastname"/><br>
名 <input type="text" name="firstname"/><br>
<input type="button" value="ロード" onClick="loadData()"><br>
</form>
<div id="display"></div>
</body>
</html>
次回はAjaxを利用してサーバーから取得するXMLをServletから出力するサンプルを紹介します。
| (2007年11月25日) |
ちょっと一休み. Javaキーワード並び替えゲーム
画面に表示される文字列を並び替えるとJavaに関連するキーワードになります。ヒントをたよりに並び替えを行ってエンターを押してください。
ユーザ登録をしてログインするとランキングに参加できます。
 |
Flex Tips |  |
|
 |
|
DWRでリッチなWebページを作る！ | |
|
|
Java Tips java.io 編 | |
|
|
|
Java Tips java.lang 編 | |
|
|
|
Java Tips java.math 編 | |
|
|
|
Java Tips java.util 編 | |
|
|
|
Java Tips java.nio 編 | |
|
|
|
Java Tips java.management 編 | |
|
|
|
Javaからデータベースを利用する | |
|
|