@ PHP

ajax()

XML は取得した内容を加工しないと HTML としてブラウザが表示できません。XML の取得・加工には ajax() というメソッドを使います。

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

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

RSS を取得して表示する

jquery_ajax_xml.htmlは、ajax() を使って XML 形式のファイルである RSS を取得し、HTML に加工して表示します。

RSS は Web サイトの更新情報などを発信するために用いられるフォーマットで、ブログやニュースサイトでおなじみのものです。

RSS にはいくつかの形式がありますが、今回取得する sample_load.xml は RSS 2.0 形式のファイルです。

jquery_ajax_xml.html

<!DOCTYPE html>
<html lang="ja">
 
<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <dl> </dl>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $.ajax({
    url:'sample_load.xml',
    dattype:'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>
</body>

</html>

スクリプトの流れ

ajax() でサーバー上にある RSS ファイルを XML データとして取得します。

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

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

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

$("item",data).each(function() {

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(functin(){・・・}) 内で使われる「this」は、「現在処理をしている要素」をさします。つまり、1つ目の item 要素に関する処理をしているときには1つ目の要素を、2つ目の item 要素に関する処理をしているときには2つ目の要素を指定していることになります。

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

sample_load.xml

<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
  <channel>
    <title>ITpro総合</title>
    <link>http://itpro.nikkeibp.co.jp/rss/ITpro.rdf</link>
    <pubDate>2014-10-29T10:20:01+09:00</pubDate>
    <item>
      <title>FacebookのQ3決算はモバイル好調で大幅な増収増益、経費も拡大</title>
      <pubDate>2014-10-29T09:52:16+09:00</pubDate>
      <link>http://itpro.nikkeibp.co.jp/atcl/news/14/102901668/</link>
      <description><![CDATA[米Facebookは現地時間2014年10月28日、(中略)営業利益は同90%増の13億9700万ドルだった。]]></description>
    </item>
    <item>
      <title>富士通がハノイでカンファレンス開催、農業クラウドなどの展開目指す</title>
      <pubDate>2014-10-29T09:05:20+09:00</pubDate>
      <link>http://itpro.nikkeibp.co.jp/atcl/news/14/102901667/</link>
      <description><![CDATA[富士通は2014年10月28日、(中略)シンガポール、タイ・バンコクに続き、シリーズ第3回となる。]]></description>
    </item>
    <item>
      <title>Twitterもパソコンからは使えない 「スマホどっぷり生活」の弊害(「ソーシャル新人類」の不夜城〜10代は何を考えているのか)</title>
      <pubDate>2014-10-29T08:51:00+09:00</pubDate>
      <link>http://itpro.nikkeibp.co.jp/atcl/column/14/537662/102400014/</link>
      <description><![CDATA[10代のユーザーたちは大抵のことをスマートフォンスマートフォンで済ませている。(中略)パソコンを使わなくなることに弊害はないのだろうか。]]></description>
    </item>
  </channel>
</rss>

demo