jQueryでAjaxを利用する(1) #jQuery

参考
http://ascii.jp/elem/000/000/458/458236/

XMLファイルを取得しHTMLとしてブラウザーに表示

テキストファイルやHTMLは、そのまま表示すればよいのですが、XMLは取得した内容を加工しないとHTMLとしてブラウザーが表示できません。

XMLの取得/操作には、ajax()という命令を使う。
参考
http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/

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

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

　ajax()にはセレクターの指定は無く$.で始まり、括弧内の{...}に設定（オプション）を記述します。設定は左側に項目名を、右側には項目に対応する値を記述し、左右は:(コロン)で区切ります。複数の設定は,(カンマ)区切りでつなげていきます。

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

RSSを取得して表示する

　ajax()を使ったサンプルとして、代表的なXML形式のファイルであるRSSを取得し、HTMLに見やすく加工して表示してみましょう。
　
sample3.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
　　記事の概要
　　
<title>...</title>の内容をdt要素に入れ、<link>...</link>に記述されているURLにa要素でリンクを張ります。<description>...</description>の内容はdd要素に入れます。

sample3.html<body>の中

<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>

　
実行結果

　
sample3(スクリプト部分)

<script type="text/javascript">
$(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>");
            })
        }
    })
})
</script>

　
ajax()でサーバー上にあるRSSファイル「msample3.xml」の内容をXMLデータとして取得します。

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

　
XMLの取得に成功すると、取得した内容は function(data){...} の「data」に入ります。このdataを対象にして加工処理をします。

$("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要素を挿入しています。