adobeのspryライブラリを用いたjavascriptによるxmlデータの読み込み表示方法について。
xmlデータは内部データのみで、外部データはこの方法では無理なのであしからず。
http://labs.adobe.com/technologies/spry/home.html
ライブラリのうちxpath.jsとSpryData.jsを使います。
<script type="text/javascript">
<!--
var ds1 = new Spry.Data.XMLDataSet("http://www.spiral-records.com/psts/index.xml", "rss/channel/item");
//-->
</script>
という感じでxmlデータファイルのパスと、xmlデータファイル内の表示したい内容までのパス(今回はrss/channel/item)を記載。
body内に例えば
<div id="" spry:region="ds1">
<div spry:repeat="ds1">
<h2>{title}</h2>
<div>{description}</div>
</div>
</div>
spry:regionで範囲指定とspry:repeatで繰り返しの指定。spry:repeatがないと最初のデータしか取得表示しません。表示したいデータの属性を{***}で指定すればOkです。
上記サンプルの全ソースは以下の通り。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>xmlデータ読み込みのためのjavascript</title>
<script src="../../SpryAssets/xpath.js" type="text/javascript"></script>
<script src="../../SpryAssets/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var ds1 = new Spry.Data.XMLDataSet("http://www.spiral-records.com/psts/index.xml", "rss/channel/item");
//-->
</script>
</head>
<body>
<div id="" spry:region="ds1">
<div spry:repeat="ds1">
<h2>{title}</h2>
<div>{description}</div>
</div>
</div>
</body>
</html>
