THE HAM MEDIA BLOG

jQueryでxmlを操作してみる

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
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>テキスト1</content>
</row>
<row recordid="2">
	<day>2008.05.06</day>
	<content>テキスト2</content>
</row>
<row recordid="3">
	<day>2008.05.07</day>
	<content>テキスト3</content>
</row>
<row recordid="4">
	<day>2008.05.08</day>
	<content>テキスト4</content>
</row>
<row recordid="5">
	<day>2008.05.09</day>
	<content>テキスト5</content>
</row>
<row recordid="6">
	<day>2008.05.10</day>
	<content>テキスト6</content>
</row>
<row recordid="7">
	<day>2008.05.11</day>
	<content>テキスト7</content>
</row>
</list_database>

データベースが無い環境でも使える

今回のようにxmlを使えば、データベースがなくても
まるでデータベースを扱っているかのように使うことができる。

そしてSpryと違ってHTMLのソースも汚さないので、
今後はいろんな面で使っていこうと思う。

補足

しかし、どこかで知ったことだが、xmlファイルを読み込むには、
xmlファイルと同じサーバーに無ければならなかったはず。

今回もアップしたところから読み込ませようとしたのだが、
それだと読み込んでくれなかった。

使えるのかもしれないが、この点についてはもう少し調べてみようと思う。



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。