[作って学ぶ！jQuery] 第5回 ajaxを使って複数ブログの最新記事一覧を表示する

作って学ぶ！jQuery

ishida

2010.05.06

イメージ

こんにちは、GWはがっつり朝から晩まで子供と遊びまくっていたishidaです。

今回はajaxを利用して、ブログの最新記事を掲載してみようと思います。
ajaxで取得するデータは、同一サーバ内のxmlデータとします。また取得するブログは以下の3つとしています。

馬車道の社長ブログ（/blog/niidome/index.xml）
ゴトウ@シーブレインの馬車道（/blog/goto/index.xml）
バシャログ。（/blog/wsg/rss.xml）

デモ

ajaxで複数ブログの最新記事掲載のサンプル

htmlソースコード

以下がhtmlソースコードです。該当部分以外は省略しています。
feeds という id 部分にデータを読み込んで表示します。

<div id="main">
<h1>ajaxで複数ブログの最新記事掲載のサンプル</h1>

<div id="feeds">
ここに表示
<!-- /#feeds --></div>

<!-- /#main --></div>

jQueryソースコード

以下がjQueryのソースコードになります。
各処理ごとにコメントを入れてありますので、参考にしてください。

$(document).ready(function () {
	// xmlのURLを指定
	var urls= ['/blog/niidome/index.xml','/blog/goto/index.xml','/blog/wsg/rss.xml'];
	// ブログ毎にデータを取得
	for ( var x =0; x < urls.length; ++x ){
		$.ajax({
			url: urls[x],
			dataType: 'xml',//読み込むデータの形式
			success: function(xml) { // Ajax通信が成功した場合
				var blog_entries = '';
				//ブログのタイトルを変数に代入
				var blog_title = $(xml).find('channel > title').text();
				//ブログの概要を変数に代入
				var blog_lead = $(xml).find('channel > description').text();
				//表示用のレイアウトを作成
				blog_entries = $('<div class="blogFeed"><h2>' + blog_title +'</h2><p>' + blog_lead +'</p><dl></dl></div>');
				//各ブログ記事ごとの処理
				$(xml).find('item').each(function(i){
					if( i == 5 ) { //新着5件まで表示
						return false;
					}
					//記事タイトルを取得
					var title = $(this).find('title').text();
					//記事パーマリンクを取得
					var link = $(this).find('link').text();
					//記事の投稿日時を取得
					var date = $(this).find('pubDate').text();
					//投稿日時を変換
					date = dateFormat(date);
					//取得した値を設定
					blog_entries.find('dl').append('<dt>'+ date +'</dt>'+'<dd><a href=\"'+ link + '\">' + title +'</a></dd>');
				});
				$('div#feeds').append(blog_entries);
			},
		error: function() { //エラー表示
				$('div#feeds').append('<p>フィードの読み込みが出来ませんでした。</p>');
			}
		});
	}
	//日付変換処理
	var dateFormat = function(str){
		var my_date = new Date(str);
		var year = my_date.getFullYear();
		var month = my_date.getMonth() + 1;
		var date = my_date.getDate();
		format_date = year + "年" + month + "月" + date + "日";
		return format_date;
	};
});