javascriptによるxmlデータの読み込み表示

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>

Javascript/jQuery | | トラックバック(0) |
Share |

トラックバック(0)

トラックバックURL: http://www.spiral-records.com/mt/mt-tb.cgi/1178

Facebookコメントプラグイン

Powered by Movable Type 4.261

Tumblr : log long long time ago