サイト制作に関するメモ書き

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

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

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

同一ドメインの場合

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

HTML

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

JavaScript

$(function() {
	$.ajax({
		url: 'http://cly7796.net/wp/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);
		}
	});
});

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

【参考サイト】

 

“jQueryで別ドメインのXMLを読み込んでみる” への8件のフィードバック

  1. ひひ より:

    こちらの記事を参考にブログの表示が出来ました!ありがとうございます。
    ただ、上記記事のように、日付を2017.01.01みたいに表示させたいと思うのですが表示が上手くできません。
    また、ブログの内容を150字程度表示させる事は可能でしょうか?
    表示させたいものは
    日付(2017.01.01みたいな)+ブログ記事のタイトル+ブログ記事の内容(159字程度)です。

  2. つっちー より:

    何度もすみません。
    HTMLでの表示はできました。

    ・記事内の最初の画像の表示
    ・記事内に画像がなかった場合の代わりの画像表示
    ・タイトルにリンクをつける

    以上のようなことはできますでしょうか?

    • cly7796.net より:

      つっちーさん
      コメントありがとうございます。

      ・記事内の最初の画像の表示
      ・記事内に画像がなかった場合の代わりの画像表示

      →こちらはXMLにサムネイルの項目があれば表示できますが、記事の本文中にある画像を表示する、ということでしたら難しいかもしれません。

      ・タイトルにリンクをつける

      →こちらは以下にサンプルをおいています。
      http://cly7796.net/wp/sample/ajax-get-xml/index5.html
      下記ファイルの31~36行目でタイトルにリンクをつけています。
      http://cly7796.net/wp/sample/ajax-get-xml/sample5.js

  3. つっちー より:

    HTMLで作成したホームページにこちらを使用することはできるのでしょうか?

  4. yama より:

    日付を2017.01.01みたいに表示させることは出来るのでしょうか?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP