jQueryでxmlを操作してみる

2008/06/13

カテゴリ：: jQuery

タグ：: jquery; javascript; xml

jQueryでxmlを操作してみる

先日、北海道WEBコンソーシアムで知り合ったとある人とメールをしている時に、
AdobeのSpryの話になった。

そこででた話題は、Dreamweverだと簡単にxmlを読み込めて、
データベースが無い環境でも使える！的なことだった。

そしてそのソースを見せてもらったのだが、
これならjQueryでもできるんじゃないかなーなんて思ってしまった。

jQueryならソースも汚さずに作れるかなとも思ったので、
さっそく勉強してみることにした。

サンプルを作ってみた

xmlの読み込みとかすら全くわからなかったのだが、
調べていたらなんとなくわかったので作ってみた。

● サンプル

サンプルのソースを下記にも示しておくが、
まずjQueryのコードも一部よくわかっていなかったりする。
また勉強せねば！！

サンプルで利用したソース

■スクリプトソース

$(function(){
	$.ajax({
    url: '○○.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert("xmlファイルの読み込みに失敗しました");
    },
    success: function(xml){
        $(xml).find("row").each(function(){
            var item_text = $(this).text();

            $("<li></li>")
                .html(item_text)
                .appendTo('ol');
        });
        $("li.demo").html("");
    }
    });
});

■HTMLソース

<ol>
<li class="demo">JavaScriptを有効にしてください。</li>
</ol>

■XMLソース

<?xml version="1.0" encoding="UTF-8" ?>
<list_database>
<row recordid="1">
	<day>2008.05.05</day>
	<content>テキスト１</content>
</row>
<row recordid="2">
	<day>2008.05.06</day>
	<content>テキスト２</content>
</row>
<row recordid="3">
	<day>2008.05.07</day>
	<content>テキスト３</content>
</row>
<row recordid="4">
	<day>2008.05.08</day>
	<content>テキスト４</content>
</row>
<row recordid="5">
	<day>2008.05.09</day>
	<content>テキスト５</content>
</row>
<row recordid="6">
	<day>2008.05.10</day>
	<content>テキスト６</content>
</row>
<row recordid="7">
	<day>2008.05.11</day>
	<content>テキスト７</content>
</row>
</list_database>