jQueryで外部RSSの取得

DL

プラグインをDLさせて頂く

GitHub – denka/jQuery-Plugins at e5f123741ce6bc1be93e1db846a0e59cfe7e750c

※ 注意

こちらではRSSの取得が出来ない

GitHub – padolsey-archive/jquery.fn: A collection of jQuery plugins

コード

<script type="text/javascript" src="js/jquery.xdomainajax.js"></script>
<script>
      $(function(){
        $.ajax({
          url: 'URL',
          type: 'GET',
          cache: false,
          dataType: 'xml',
          timeout: 5000,
          success: function(res, status) {
            if (status === 'success') {

              // responseText から取得して、xml 形式に変換する必要があり
              var xmlText = res["responseText"];
              var xml = $.parseXML(xmlText);

              var row = 0;
              var data = [];
              var nodeName;

              $(xml).find('item').each(function() {
                data[row] = {};
                $(this).children().each(function() { // 子要素を取得
                    nodeName = $(this)[0].nodeName; // 要素名
                    data[row][nodeName] = {}; // 初期化
                    attributes = $(this)[0].attributes; // 属性を取得
                    for (var i in attributes) {
                    data[row][nodeName][attributes[i].name] = attributes[i].value; // 属性名 = 値
                    }
                  data[row][nodeName]['text'] = $(this).text();
                });
                row++;
              });
              for (i in data) {
                  $('#rss').append('<div>' + 
                    '<a href="' + data[i].link.text + '" target="_blank"><dl>' + 
                    '<dt><img src="' + data[i].enclosure.url + '"></dt>' +
                    '<dd class="title">' + data[i].title.text + '</dd>' +
                    '<dd class="date">' + data[i].pubDate.text + '</dd>' +
                    '<dd class="description">' + data[i].description.text.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'').substr(0, 70) + '</dd>' +
                    '</dl></a></div>');
              }
            }
          }
        });
      });
</script>

$(function(){

$.ajax({

url: 'URL',

type: 'GET',

cache: false,

dataType: 'xml',

timeout: 5000,

success: function(res, status) {

if (status === 'success') {

// responseText から取得して、xml 形式に変換する必要があり

var xmlText = res["responseText"];

var xml = $.parseXML(xmlText);

var row = 0;

var data = [];

var nodeName;

$(xml).find('item').each(function() {

data[row] = {};

$(this).children().each(function() { // 子要素を取得

nodeName = $(this)[0].nodeName; // 要素名

data[row][nodeName] = {}; // 初期化

attributes = $(this)[0].attributes; // 属性を取得

for (var i in attributes) {

data[row][nodeName][attributes[i].name] = attributes[i].value; // 属性名 = 値

}

data[row][nodeName]['text'] = $(this).text();

});

row++;

});

for (i in data) {

$('#rss').append('<div>' +

'<a href="' + data[i].link.text + '" target="_blank"><dl>' +

'<dt><img src="' + data[i].enclosure.url + '"></dt>' +

'<dd class="title">' + data[i].title.text + '</dd>' +

'<dd class="date">' + data[i].pubDate.text + '</dd>' +

'<dd class="description">' + data[i].description.text.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'').substr(0, 70) + '</dd>' +

'</dl></a></div>');

}

});

</script>

捕捉

普通のXML取得方法と同じようにやったら上手くいかなくて、調べてみたら responseText に入ってきたテキストをxmlに変換する必要がありました。

              // responseText から取得して、xml 形式に変換する必要があり
              var xmlText = res["responseText"];
              var xml = $.parseXML(xmlText);

// responseText から取得して、xml 形式に変換する必要があり

var xmlText = res["responseText"];

var xml = $.parseXML(xmlText);

HTML

body に入れ物のdiv

<div id="rss"></div>

1	<div id="rss"></div>

DEMO

週刊はてなブログのRSSを取得

（とりあえずで書いてるCSSが微妙ですが・・・。）

参考にさせて頂きました

ありがとうございました。