RSS beslemelerini ayrıştırmak için jQuery kullanmak istiyorum. Bu temel jQuery kitaplığı kutudan çıkartılabilir mi yoksa bir eklenti kullanmam gerekir mi?
RSS beslemelerini ayrıştırmak için jQuery kullanmak istiyorum. Bu temel jQuery kitaplığı kutudan çıkartılabilir mi yoksa bir eklenti kullanmam gerekir mi?
Yanıtlar:
UYARI
Google Feed API'sı resmi olarak kullanımdan kaldırıldı ve artık çalışmıyor !
Bütün bir eklentiye gerek yok. Bu, RSS'nizi JSON nesnesi olarak geri arama işlevine döndürür:
function parseRSS(url, callback) {
$.ajax({
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
dataType: 'json',
success: function(data) {
callback(data.responseData.feed);
}
});
}
Bir jQuery RSS / Atom eklentisi olan jFeed kullanın . Dokümanlara göre, bu kadar basit:
jQuery.getFeed({
url: 'rss.xml',
success: function(feed) {
alert(feed.title);
}
});
Tartışmaya geç gelenlerimiz için, 1.5 jQuery dahili xml ayrıştırma yeteneklerine sahiptir, bu da eklentiler veya 3. taraf hizmetleri olmadan bunu yapmayı oldukça kolaylaştırır. Bir parseXml işlevine sahiptir ve $ .get işlevini kullanırken xml'yi otomatik olarak ayrıştırır. Örneğin:
$.get(rssurl, function(data) {
var $xml = $(data);
$xml.find("item").each(function() {
var $this = $(this),
item = {
title: $this.find("title").text(),
link: $this.find("link").text(),
description: $this.find("description").text(),
pubDate: $this.find("pubDate").text(),
author: $this.find("author").text()
}
//Do something with item here...
});
});
$this.find("link").text()
hep boş dize döndürür ''?
jFeed IE'de çalışmaz.
ZRSSFeed kullanın . 5 dakikada çalışıyor muydu
Güncelleme (15 Eki 2019)
Temel mantığı jquery-rss'den getirme API'sını kullanan ve herhangi bir ek bağımlılık olmadan çalışabilen Vanilla RSS adlı yeni bir kütüphaneye çıkardım :
const RSS = require('vanilla-rss');
const rss = new RSS(
document.querySelector("#your-div"),
"http://www.recruiter.com/feed/career.xml",
{
// options go here
}
);
rss.render().then(() => {
console.log('Everything is loaded and rendered');
});
orijinal
İleti:
Ayrıca hoş bir şablonla birlikte gelen ve kullanımı çok kolay olan jquery- rss'yi de kullanabilirsiniz:
$("#your-div").rss("http://www.recruiter.com/feed/career.xml", {
limit: 3,
layoutTemplate: '<ul class="inline">{entries}</ul>',
entryTemplate: '<li><a href="{url}">[{author}@{date}] {title}</a><br/>{shortBodyPlain}</li>'
})
ürün (18 Eylül 2013 itibariyle):
<div id="your-div">
<ul class="inline">
<entries></entries>
</ul>
<ul class="inline">
<li><a href="http://www.recruiter.com/i/when-to-go-over-a-recruiter%e2%80%99s-head/">[@Tue, 10 Sep 2013 22:23:51 -0700] When to Go Over a Recruiter's Head</a><br>Job seekers tend to have a certain "fear" of recruiters and hiring managers, and I mean fear in the reverence and respect ...</li>
<li><a href="http://www.recruiter.com/i/the-perfect-job/">[@Tue, 10 Sep 2013 14:52:40 -0700] The Perfect Job</a><br>Having long ago dealt with the "perfect resume" namely God's, in a previous article of mine, it makes sense to consider the ...</li>
<li><a href="http://www.recruiter.com/i/unemployment-benefits-applications-remain-near-5-year-low-decline-again/">[@Mon, 09 Sep 2013 12:49:17 -0700] Unemployment Benefits Applications Remain Near 5-Year Low, Decline Again</a><br>As reported by the U.S. Department of Labor, the number of workers seeking unemployment benefits continued to sit near ...</li>
</ul>
</div>
Çalışan bir örnek için bkz. Http://jsfiddle.net/sdepold/ozq2dn9e/1/ .
moment.js
function getFeed(sender, uri) {
jQuery.getFeed({
url: 'proxy.php?url=' + uri,
success: function(feed) {
jQuery(sender).append('<h2>'
+ '<a href="'
+ feed.link
+ '">'
+ feed.title
+ '</a>'
+ '</h2>');
var html = '';
for(var i = 0; i < feed.items.length && i < 5; i++) {
var item = feed.items[i];
html += '<h3>'
+ '<a href="'
+ item.link
+ '">'
+ item.title
+ '</a>'
+ '</h3>';
html += '<div class="updated">'
+ item.updated
+ '</div>';
html += '<div>'
+ item.description
+ '</div>';
}
jQuery(sender).append(html);
}
});
}
<div id="getanewbrowser">
<script type="text/javascript">
getFeed($("#getanewbrowser"), 'http://feeds.feedburner.com/getanewbrowser')
</script>
</div>
RSS verileriniz özel değilse Google AJAX Feed API'sını kullanın. Tabii ki hızlı.
GÜNCELLEME [ 25.04.2016 ] GitHub.jQRSS'de barındırılan daha fazla seçenek ve yetenekle daha iyi yazılmış ve tam olarak desteklenen sürüm
Nathan Strutz tarafından seçilen cevabı gördüm , ancak jQuery Eklentisi sayfa bağlantısı hala kapalı ve o sitenin ana sayfası yüklenmiyor gibi görünüyor. Birkaç çözüm daha denedim ve bunların çoğunun sadece eski değil KOLAY olduğunu gördüm ! Böylece şapkamı oraya attım ve kendi eklentimi yaptım ve buradaki ölü bağlantılar ile bu, cevap vermek için harika bir yer gibi görünüyor. Bu cevabı 2012'de arıyorsanız (yakında b 2013'e kadar) burada yaptığım gibi ölü bağlantıların ve eski tavsiyelerin hayal kırıklığını fark edebilirsiniz. Aşağıda, modern eklenti örneğimin yanı sıra eklentinin koduna bir bağlantı var ! Kodu bir JS dosyasına kopyalayın ve diğer eklentiler gibi başlığınıza bağlayın. Kullanım son derece EZ!
Eklenti Kodu
2/9/2015 -console
komut göndermeden önce kontrol etmek için gecikmiş güncelleme yapıldı ! Eski IE sorunları ile yardımcı olmalıdır.
(function($) {
if (!$.jQRSS) {
$.extend({
jQRSS: function(rss, options, func) {
if (arguments.length <= 0) return false;
var str, obj, fun;
for (i=0;i<arguments.length;i++) {
switch(typeof arguments[i]) {
case "string":
str = arguments[i];
break;
case "object":
obj = arguments[i];
break;
case "function":
fun = arguments[i];
break;
}
}
if (str == null || str == "") {
if (!obj['rss']) return false;
if (obj.rss == null || obj.rss == "") return false;
}
var o = $.extend(true, {}, $.jQRSS.defaults);
if (typeof obj == "object") {
if ($.jQRSS.methods.getObjLength(obj) > 0) {
o = $.extend(true, o, obj);
}
}
if (str != "" && !o.rss) o.rss = str;
o.rss = escape(o.rss);
var gURL = $.jQRSS.props.gURL
+ $.jQRSS.props.type
+ "?v=" + $.jQRSS.props.ver
+ "&q=" + o.rss
+ "&callback=" + $.jQRSS.props.callback;
var ajaxData = {
num: o.count,
output: o.output,
};
if (o.historical) ajaxData.scoring = $.jQRSS.props.scoring;
if (o.userip != null) ajaxData.scoring = o.userip;
$.ajax({
url: gURL,
beforeSend: function (jqXHR, settings) { if (window['console']) { console.log(new Array(30).join('-'), "REQUESTING RSS XML", new Array(30).join('-')); console.log({ ajaxData: ajaxData, ajaxRequest: settings.url, jqXHR: jqXHR, settings: settings, options: o }); console.log(new Array(80).join('-')); } },
dataType: o.output != "xml" ? "json" : "xml",
data: ajaxData,
type: "GET",
xhrFields: { withCredentials: true },
error: function (jqXHR, textStatus, errorThrown) { return new Array("ERROR", { jqXHR: jqXHR, textStatus: textStatus, errorThrown: errorThrown } ); },
success: function (data, textStatus, jqXHR) {
var f = data['responseData'] ? data.responseData['feed'] ? data.responseData.feed : null : null,
e = data['responseData'] ? data.responseData['feed'] ? data.responseData.feed['entries'] ? data.responseData.feed.entries : null : null : null
if (window['console']) {
console.log(new Array(30).join('-'), "SUCCESS", new Array(30).join('-'));
console.log({ data: data, textStatus: textStatus, jqXHR: jqXHR, feed: f, entries: e });
console.log(new Array(70).join('-'));
}
if (fun) {
return fun.call(this, data['responseData'] ? data.responseData['feed'] ? data.responseData.feed : data.responseData : null);
}
else {
return { data: data, textStatus: textStatus, jqXHR: jqXHR, feed: f, entries: e };
}
}
});
}
});
$.jQRSS.props = {
callback: "?",
gURL: "http://ajax.googleapis.com/ajax/services/feed/",
scoring: "h",
type: "load",
ver: "1.0"
};
$.jQRSS.methods = {
getObjLength: function(obj) {
if (typeof obj != "object") return -1;
var objLength = 0;
$.each(obj, function(k, v) { objLength++; })
return objLength;
}
};
$.jQRSS.defaults = {
count: "10", // max 100, -1 defaults 100
historical: false,
output: "json", // json, json_xml, xml
rss: null, // url OR search term like "Official Google Blog"
userip: null
};
}
})(jQuery);
KULLANIM
// Param ORDER does not matter, however, you must have a link and a callback function
// link can be passed as "rss" in options
// $.jQRSS(linkORsearchString, callbackFunction, { options })
$.jQRSS('someUrl.xml', function(feed) { /* do work */ })
$.jQRSS(function(feed) { /* do work */ }, 'someUrl.xml', { count: 20 })
$.jQRSS('someUrl.xml', function(feed) { /* do work */ }, { count: 20 })
$.jQRSS({ count: 20, rss: 'someLink.xml' }, function(feed) { /* do work */ })
$ .jQRSS ('Bağlantı yerine' Burada Kelime Ara ', function (feed) {/ * do work * /})
// TODO: Düzeltme gerekiyor
Seçenekler
{
count: // default is 10; max is 100. Setting to -1 defaults to 100
historical: // default is false; a value of true instructs the system to return any additional historical entries that it might have in its cache.
output: // default is "json"; "json_xml" retuns json object with xmlString / "xml" returns the XML as String
rss: // simply an alternate place to put news feed link or search terms
userip: // as this uses Google API, I'll simply insert there comment on this:
/* Reference: https://developers.google.com/feed/v1/jsondevguide
This argument supplies the IP address of the end-user on
whose behalf the request is being made. Google is less
likely to mistake requests for abuse when they include
userip. In choosing to utilize this parameter, please be
sure that you're in compliance with any local laws,
including any laws relating to disclosure of personal
information being sent.
*/
}
(function(url, callback) {
jQuery.ajax({
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
dataType: 'json',
success: function(data) {
callback(data.responseData.feed);
}
});
})('http://news.hitb.org/rss.xml', function(feed){ // Change to desired URL
var entries = feed.entries, feedList = '';
for (var i = 0; i < entries.length; i++) {
feedList +='<li><a href="' + entries[i].link + '">' + entries[i].title + '</a></li>';
}
jQuery('.feed > ul').append(feedList);
});
<div class="feed">
<h4>Hacker News</h4>
<ul></ul>
</div>
@Andrew'a katılıyorum , Google'ı kullanmak XML yerine JSON'u geri almanın büyük faydasıyla bunu yapmanın sağlam ve yeniden kullanılabilir bir yoludur. Google'ı proxy olarak kullanmanın ek bir avantajı, verilerine doğrudan erişiminizi engelleyebilecek hizmetlerin Google'ı durdurması pek olası değildir. İşte kayak raporu ve koşul verilerini kullanan bir örnek. Bu, tüm ortak gerçek dünya uygulamalarına sahiptir: 1) Üçüncü taraf RSS / XML 2) JSONP 3) Verileri tam olarak istediğiniz şekilde alamadığınızda dizeleri ve dizeyi temizleme 4) DOM. Umarım bazı insanlara yardımcı olur!
<!-- Load RSS Through Google as JSON using jQuery -->
<script type="text/javascript">
function displaySkiReport (feedResponse) {
// Get ski report content strings
var itemString = feedResponse.entries[0].content;
var publishedDate = feedResponse.entries[0].publishedDate;
// Clean up strings manually as needed
itemString = itemString.replace("Primary: N/A", "Early Season Conditions");
publishedDate = publishedDate.substring(0,17);
// Parse ski report data from string
var itemsArray = itemString.split("/");
//Build Unordered List
var html = '<h2>' + feedResponse.entries[0].title + '</h2>';
html += '<ul>';
html += '<li>Skiing Status: ' + itemsArray[0] + '</li>';
// Last 48 Hours
html += '<li>' + itemsArray[1] + '</li>';
// Snow condition
html += '<li>' + itemsArray[2] + '</li>';
// Base depth
html += '<li>' + itemsArray[3] + '</li>';
html += '<li>Ski Report Date: ' + publishedDate + '</li>';
html += '</ul>';
$('body').append(html);
}
function parseRSS(url, callback) {
$.ajax({
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
dataType: 'json',
success: function(data) {
callback(data.responseData.feed);
}
});
}
$(document).ready(function() {
// Ski report
parseRSS("http://www.onthesnow.com/michigan/boyne-highlands/snow.rss", displaySkiReport);
});
</script>
jFeed biraz eski, sadece jQuery'nin eski sürümleriyle çalışıyor. Güncellenmesinden bu yana iki yıl geçti.
zRSSFeed belki biraz daha az esnektir, ancak kullanımı kolaydır ve jQuery'nin şu anki sürümü ile çalışır (şu anda 1.4). http://www.zazar.net/developers/zrssfeed/
İşte zRSSFeed belgelerinden kısa bir örnek:
<div id="test"><div>
<script type="text/javascript">
$(document).ready(function () {
$('#test').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
limit: 5
});
});
</script>
Besleme için yql ile jquery kullanıyorum. Twitter, rss, vızıltıyı yql ile alabilirsiniz. Http://tutorialzine.com/2010/02/feed-widget-jquery-css-yql/ adresinden okudum . Benim için çok faydalı.
FeedEk kullanmanızı tavsiye ederim . Google Feed API'sı resmi olarak kullanımdan kaldırıldıktan sonra eklentilerin çoğu çalışmaz. Ancak FeedEk hala çalışıyor. Kullanımı çok kolaydır ve özelleştirmek için birçok seçeneğe sahiptir.
$('#divRss').FeedEk({
FeedUrl:'http://jquery-plugins.net/rss'
});
Seçenekler ile
$('#divRss').FeedEk({
FeedUrl:'http://jquery-plugins.net/rss',
MaxCount : 5,
ShowDesc : true,
ShowPubDate:true,
DescCharacterLimit:100,
TitleLinkTarget:'_blank',
DateFormat: 'MM/DD/YYYY',
DateFormatLang:'en'
});
<script type="text/javascript" src="./js/jquery/jquery.js"></script>
<script type="text/javascript" src="./js/jFeed/build/dist/jquery.jfeed.pack.js"></script>
<script type="text/javascript">
function loadFeed(){
$.getFeed({
url: 'url=http://sports.espn.go.com/espn/rss/news/',
success: function(feed) {
//Title
$('#result').append('<h2><a href="' + feed.link + '">' + feed.title + '</a>' + '</h2>');
//Unordered List
var html = '<ul>';
$(feed.items).each(function(){
var $item = $(this);
//trace( $item.attr("link") );
html += '<li>' +
'<h3><a href ="' + $item.attr("link") + '" target="_new">' +
$item.attr("title") + '</a></h3> ' +
'<p>' + $item.attr("description") + '</p>' +
// '<p>' + $item.attr("c:date") + '</p>' +
'</li>';
});
html += '</ul>';
$('#result').append(html);
}
});
}
</script>
Google ajax api kullanın google ve istediğiniz herhangi bir çıkış biçimi tarafından önbelleğe.
Kod örneği; http://code.google.com/apis/ajax/playground/#load_feed
<script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
<script type="text/javascript">
/*
* How to load a feed via the Feeds API.
*/
google.load("feeds", "1");
// Our callback function, for when a feed is loaded.
function feedLoaded(result) {
if (!result.error) {
// Grab the container we will put the results into
var container = document.getElementById("content");
container.innerHTML = '';
// Loop through the feeds, putting the titles onto the page.
// Check out the result object for a list of properties returned in each entry.
// http://code.google.com/apis/ajaxfeeds/documentation/reference.html#JSON
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
}
}
function OnLoad() {
// Create a feed instance that will grab Digg's feed.
var feed = new google.feeds.Feed("http://www.digg.com/rss/index.xml");
// Calling load sends the request off. It requires a callback function.
feed.load(feedLoaded);
}
google.setOnLoadCallback(OnLoad);
</script>
zRSSfeed jQuery üzerine kurulmuştur ve basit tema harika.
Bir şans ver.
JQuery-rss projesi oldukça hafiftir ve belirli bir stil oluşturmaz.
Sözdizimi şu kadar basit olabilir:
$("#rss-feeds").rss("http://www.recruiter.com/feed/career.xml")
Http://jsfiddle.net/jhfrench/AFHfn/ adresindeki çalışan bir örneğe bakın
jQuery Feeds güzel bir seçenektir, yerleşik bir şablonlama sistemine sahiptir ve Google Feed API'sını kullanır, bu nedenle web alanları arası desteğe sahiptir.
Superfeedr bunu çok iyi yapan bir jquery eklentisine sahiptir. Çapraz Kaynak Politikasıyla ilgili bir sorununuz olmayacak ve güncellemeler gerçek zamanlı olarak yayınlanacak.
jFeed kolaydır ve test etmeniz için bir örnek vardır . Ancak başka bir sunucudan yayın ayrıştırıyorsanız, yayın sunucusunda Çapraz Kaynak Kaynağı Paylaşımına (CORS) izin vermeniz gerekir . Ayrıca tarayıcı desteğini kontrol etmeniz gerekir .
Örneği yükledim ancak http protokolü üzerinden example.com/feed.rss gibi bir şeye örnekte URL'yi değiştirdiğimde hala IE'den destek alamadım. CORS IE 8 ve üstü için desteklenmelidir, ancak jFeed örneği feed'i oluşturmamıştır.
En iyi seçeneğiniz Google'ın API'sını kullanmaktır:
https://developers.google.com/feed/v1/devguide
Bkz.
Https://github.com/jfhovinne/jFeed
http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
http://en.wikipedia.org/wiki/Same_origin_policy
http://caniuse.com/cors