参考
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
ASCII.jp - Web Professional(ウェブ・プロフェッショナル) http://ascii.jp/cate/161/ Sun, 23 Aug 2009 10:08:43 +0900 ママチャリ屋が高級店に Web展開でトップギア Fri, 21 Aug 2009 11:00:00 +0900 http://ascii.jp/elem/000/000/451/451782/summary.html 入門Ext JS:グリッドパネルの使い方をマスター Thu, 20 Aug 2009 14:00:00 +0900 http://ascii.jp/elem/000/000/450/450711/summary.html サーバー不要!Yahoo! PipesでXML→JSONPに変換 Wed, 22 Jul 2009 23:07:25 +0900 http://ascii.jp/elem/000/000/438/438132/summary.html >```
RSSではitem要素内にそれぞれ個別の記事の更新情報が記述されており、その子要素には以下のようなデータが記述されています。
title
タイトル
pubDate
公開日
link
記事のURL
description
記事の概要
<title>...</title>
の内容をdt要素に入れ、<link>...</link>
に記述されているURLにa要素でリンクを張ります。<description>...</description>
の内容はdd要素に入れます。
sample3.html<body>
の中
- ママチャリ屋が高級店に Web展開でトップギア
- 今から12年前、(中略)その舞台裏を追った。
- 入門Ext JS:グリッドパネルの使い方をマスター
- JavaScript(中略)を紹介する。
- サーバー不要!Yahoo! PipesでXML→JSONPに変換
- XMLをJSONPに(中略)作れる。
実行結果
sample3(スクリプト部分)
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",data) はXMLのitem要素の内容を取得するセレクターです。jQueryセレクターでは"(ダブルクオーテーション)で包まれたセレクターの後ろに,(カンマ)区切りでセレクターの範囲を指定できます。この場合、itemを取得する範囲は「data」、つまり取得したXMLの内容ということになります。
each(function(){...})は、セレクターに含まれる複数の要素に対して、1回ずつ同じ処理を繰り返し実行する命令です
このサンプルの場合、セレクターでitem要素が指定されており、XMLには3つのitem要素が存在しますので、それぞれのitem要素に対して処理が1回ずつ、計3回実行されます。
$("dl").append("
append()は、指定した要素内部の最後にHTMLを挿入する命令でした。今回はdl要素の内側に、dt要素とdd要素を挿入しています。