jQueryで別ドメインのXMLを読み込んでみる

クロスドメインでのXML取得を、phpを使って実装してみます。

同一ドメインの場合

まずは、同一ドメインの場合のXML取得のサンプルです。

HTML

<div id="sample"></div>

JavaScript

$(function() {
	$.ajax({
		url: 'https://cly7796.net/blog/feed/',
		dataType: 'xml',
		success: function(data) {
			// 取得件数
			var getCount = 5;
			if ($('item', data).length < getCount) {
				getCount = data.length;
			};

			var insert = '';
			insert += '<h1>';
			// リンク先の挿入
			insert += '<a href="' + $('channel', data).children('link').text() + '">';
			// タイトルの挿入
			insert += $('channel', data).children('title').text();
			insert += '</a>';
			insert += '</h1>';

			insert += '<ul>';
			for (var i = 0; i < getCount; i++) {
				var thisItem = $('channel', data).children('item').eq(i);
				insert += '<li>';

				// 日時の挿入
				insert += '<p class="pubDate">';
				insert += thisItem.children('pubDate').text();
				insert += '</p>';

				// タイトルの挿入
				insert += '<p class="title">';
				insert += thisItem.children('title').text();
				insert += '</p>';

				// リンク先の挿入
				insert += '<a href="' + thisItem.children('link').text() + '">詳細はコチラ</a>';

				insert += '</li>';
			};
			insert += '</ul>';

			$('#sample').append(insert);
		}
	});
});

同一ドメインの場合のデモページ
　

この読み込むXMLを別ドメインのものに変更しても、このままではうまく表示されません。

JavaScript

$(function() {
	$.ajax({
		url: 'http://feedblog.ameba.jp/rss/ameblo/clown-happy/rss20.xml',
		dataType: 'xml',
		success: function(data) {
			// 取得件数
			var getCount = 5;
			if ($('item', data).length < getCount) {
				getCount = data.length;
			};

			var insert = '';
			insert += '<h1>';
			// リンク先の挿入
			insert += '<a href="' + $('channel', data).children('link').text() + '">';
			// タイトルの挿入
			insert += $('channel', data).children('title').text();
			insert += '</a>';
			insert += '</h1>';

			insert += '<ul>';
			for (var i = 0; i < getCount; i++) {
				var thisItem = $('channel', data).children('item').eq(i);
				insert += '<li>';

				// 日時の挿入
				insert += '<p class="pubDate">';
				insert += thisItem.children('pubDate').text();
				insert += '</p>';

				// タイトルの挿入
				insert += '<p class="title">';
				insert += thisItem.children('title').text();
				insert += '</p>';

				// リンク先の挿入
				insert += '<a href="' + thisItem.children('link').text() + '">詳細はコチラ</a>';

				insert += '</li>';
			};
			insert += '</ul>';

			$('#sample').append(insert);
		}
	});
});

別ドメインの場合のデモページ
　

別ドメインの場合

方法はいくつかあるみたいですが、今回はPHPで一回取得してから、それを読み込むようにします。

PHP

<?php
$url = "http://rssblog.ameba.jp/clown-happy/rss20.xml";
$xml = file_get_contents($url);
header("Content-type: application/xml; charset=UTF-8");
print $xml;

JavaScript

$(function() {
	$.ajax({
		url: 'get.php',
		dataType: 'xml',
		success: function(data) {
			// 取得件数
			var getCount = 5;
			if ($('item', data).length < getCount) {
				getCount = data.length;
			};

			var insert = '';
			insert += '<h1>';
			// リンク先の挿入
			insert += '<a href="' + $('channel', data).children('link').text() + '">';
			// タイトルの挿入
			insert += $('channel', data).children('title').text();
			insert += '</a>';
			insert += '</h1>';

			insert += '<ul>';
			for (var i = 0; i < getCount; i++) {
				var thisItem = $('channel', data).children('item').eq(i);
				insert += '<li>';

				// 日時の挿入
				insert += '<p class="pubDate">';
				insert += thisItem.children('pubDate').text();
				insert += '</p>';

				// タイトルの挿入
				insert += '<p class="title">';
				insert += thisItem.children('title').text();
				insert += '</p>';

				// リンク先の挿入
				insert += '<a href="' + thisItem.children('link').text() + '">詳細はコチラ</a>';

				insert += '</li>';
			};
			insert += '</ul>';

			$('#sample').append(insert);
		}
	});
});

別ドメインの場合のデモページ
　

【参考サイト】

• JavaScriptのクロスドメイン制限を突破する – WEBる。