Web制作の現場で使えるjQuery　UIデザイン入門 ― 第10回

jQueryでAjaxを利用する基本チュートリアル

2009年09月11日 17時00分更新

文● 西畑一馬／to-R

XMLデータを取得、加工して表示する

　テキストファイル、HTMLファイルの次は、いよいよXML形式のデータを扱ってみましょう。テキストファイルやHTMLは、読み込んだ内容をそのまま表示すればよいのですが、XMLは取得した内容を加工しないとHTMLとしてブラウザーが表示できません。XMLの取得／操作には、ajax()という命令を使います。

　ajax()は以下のような書き方で使います。


$.ajax({
    url: '取得するXMLファイル',
    dataType: 'xml',
    success : function(data){
        //取得したファイルに対する処理
    }
})

　これまでのjQueryの書き方とはちょっと違うので戸惑われたかもしれません。ajax()にはセレクターの指定はなく $. で始まり、括弧内の {...} に設定（オプション）を記述します。設定は左側に項目名を、右側には項目に対応する値を記述し、左右は:(コロン)で区切ります。複数の設定は ,(カンマ)区切りでつなげていきます。

　urlには取得したいXMLファイルのファイル名を、dataTypeにはデータの種類として「xml」を設定します。successはデータの取得に成功したときに実行する処理を設定し、処理の内容は function(data){...}の内側にまとめて記述します。

■RSSを取得して表示する

　ajax()を使ったサンプルとして、代表的なXML形式のファイルであるRSSを取得し、HTMLに見やすく加工して表示してみましょう。RSSはWebサイトの更新情報などを発信するために用いられるフォーマットで、ブログなどでおなじみですね。RSSにはいくつかの種類がありますが、今回は以下のようなRSS（Really Simple Syndication） 2.0形式のファイルを扱います。

▼サンプル03（取得するXMLデータ）


<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
    <channel>
        <title>ASCII.jp － Web Professional（ウェブ・プロフェッショナル）</title>
        <link>http://ascii.jp/cate/161/</link>
        <pubDate>Sun, 23 Aug 2009 10:08:43 +0900</pubDate>
        <item>
            <title>ママチャリ屋が高級店に　Web展開でトップギア </title>
            <pubDate>Fri, 21 Aug 2009 11:00:00 +0900</pubDate>
            <link>http://ascii.jp/elem/000/000/451/451782/summary.html</link>
            <description><![CDATA[今から12年前、(中略)その舞台裏を追った。]]></description>
        </item>
        <item>
            <title>入門Ext JS：グリッドパネルの使い方をマスター </title>
            <pubDate>Thu, 20 Aug 2009 14:00:00 +0900</pubDate>
            <link>http://ascii.jp/elem/000/000/450/450711/summary.html</link>
            <description><![CDATA[JavaScript(中略)を紹介する。]]></description>
        </item>
        <item>
            <title>サーバー不要！Yahoo! PipesでXML→JSONPに変換 </title>
            <pubDate>Wed, 22 Jul 2009 23:07:25 +0900</pubDate>
            <link>http://ascii.jp/elem/000/000/438/438132/summary.html</link>
            <description><![CDATA[XMLをJSONPに(中略)作れる。]]></description>
        </item>
    </channel>
</rss>

　RSSではitem要素内にそれぞれ個別の記事の更新情報が記述されており、その子要素には以下のようなデータが記述されています。

title: タイトル
pubDate: 公開日
link: 記事のURL
description: 記事の概要

　このRSSファイルを次のようなHTMLに加工して表示します。<title>...</title>の内容をdt要素に入れ、<link>...</link>に記述されているURLにa要素でリンクを張ります。<description>...</description>の内容はdd要素に入れます。

▼サンプル03（実行結果）


<dl>
    <dt><a href="http://ascii.jp/elem/000/000/451/451782/summary.html">ママチャリ屋が高級店に　Web展開でトップギア</a></dt>
    <dd>今から12年前、(中略)その舞台裏を追った。</dd>
    <dt><a href="http://ascii.jp/elem/000/000/450/450711/summary.html">入門Ext JS：グリッドパネルの使い方をマスター </a></dt>
    <dd>JavaScript(中略)を紹介する。</dd>
    <dt><a href="http://ascii.jp/elem/000/000/438/438132/summary.html">サーバー不要！Yahoo! PipesでXML→JSONPに変換</a></dt>
    <dd>XMLをJSONPに(中略)作れる。</dd>
</dl>


XMLファイルから取得した情報をHTMLに加工して表示する

　これらの処理をまとめると、以下のようなコードになります。

▼サンプル03（スクリプト部分）


$(function(){
    $.ajax({
        url: 'sample3.xml',
        dataType: 'xml',
        success : function(data){
            $("item",data).each(function(){
                $("dl").append("<dt><a href='"+$("link",this).text()+"'>"+$("title",this).text()+"</a></dt><dd>"+$("description",this).text()+"</dd>");
            })
        }
    })
})

▼サンプル03（HTML部分）


<dl></dl>

　このままだと少し複雑なので、ソースコードを分割して詳しく見ていきましょう。まず、ajax() でサーバー上にあるRSSファイル「sample3.xml」の内容をXMLデータとして取得します。


$(function(){
    $.ajax({
        url: 'sample3.xml',
        dataType: 'xml',
        success : function(data){
            //取得したファイルに対する処理
        }
    })
})

　次に、取得したXMLに対する加工処理を記述していきます。XMLの取得に成功すると、取得した内容は function(data){...} の「data」に入ります。このdataを対象にして加工処理をします。XMLファイルはHTMLと同じようなタグで構成される文書フォーマットですので、jQueryのセレクターで範囲を指定できます。


$("item",data).each(function(){
    //<item>に対する処理
})

　$("item",data) はXMLのitem要素の内容を取得するセレクターです。jQueryセレクターでは"(ダブルクオーテーション)で包まれたセレクターの後ろに,(カンマ)区切りでセレクターの範囲を指定できます。この場合、itemを取得する範囲は「data」、つまり取得したXMLの内容ということになります。

　each(function(){...})は、セレクターに含まれる複数の要素に対して、1回ずつ同じ処理を繰り返し実行する命令です（この後のコラムで詳しく解説します）。このサンプルの場合、セレクターでitem要素が指定されており、XMLには3つのitem要素が存在しますので、それぞれのitem要素に対して処理が1回ずつ、計3回実行されます。


$("dl").append("<dt><a href='"+$("link",this).text()+"'>"+$("title",this).text()+"</a></dt><dd>"+$("description",this).text()+"</dd>");

　append()は、指定した要素内部の最後にHTMLを挿入する命令でした（関連記事)。今回はdl要素の内側に、dt要素とdd要素を挿入しています。

　$("link",this).text() の部分では、XMLのitem要素からlink要素内のテキストをtext()で取得しています。each(function(){...}) 内で利用される「this」は、現在処理をしている要素を表します（次ページのコラムにて解説）。つまり、1つ目のitem要素に関する処理をしているときには1つ目のitem要素を、2つ目のitem要素の処理をしているときには2つ目のitem要素を指定していることになります。

　同様に、item要素内のtitle要素／description要素内のテキストを取得してHTMLのdt要素、dd要素に書き出しています。

◆

　最後はちょっと難しくなってしまいましたが、Ajaxが使えるようになるとWeb制作者としてできることがぐっと広がります。たとえば、RSSから新着ページの情報を取得してサイト内の各ページのサイドメニューに表示する、あるいは、サブカテゴリー内の複数のページの見出しを取得してインデックスを作る、といったこともjQueryとHTMLだけで簡単にできてしまうのです。

　AjaxとjQueryの他の機能と組み合わせたより具体的な使い方は、本連載の別の回でも紹介する予定ですが、最後に1つだけ、このページ上で簡単な使用例をお見せしておきましょう。以下の「著者のプロフィール」という文字をクリックしてみてください。

著者のプロフィール

　著者のプロフィールが表示されたと思いますが、右クリックしてこのページのソースコードを覗いてみても、どこにもプロフィールの情報はありません。実は、クリックして表示されたプロフィールは、連載の第1回のページ（http://ascii.jp/elem/000/000/435/435362/index-3.html）から、今回紹介したload()を使って読み込んだものです。実際のソースコードは以下の通り、たったの4行です。


        $("#showProfile").click(function(){
            $("#inProfile").load("/elem/000/000/435/435362/index-3.html #aProfile");
            return false;
        })

　ぜひ実際に手を動かしながら、jQueryのAjax機能を試してみてください。

前へ 1 2 3 4 次へ

ツイートする