このページの本文へ

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に表示している
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機能を試してみてください。

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く