Tôi muốn sử dụng jQuery để phân tích các nguồn cấp RSS. Điều này có thể được thực hiện với thư viện jQuery cơ bản không hoặc tôi có cần sử dụng plugin không?
Tôi muốn sử dụng jQuery để phân tích các nguồn cấp RSS. Điều này có thể được thực hiện với thư viện jQuery cơ bản không hoặc tôi có cần sử dụng plugin không?
Câu trả lời:
CẢNH BÁO
Feed API của Google chính thức phản đối và không làm việc nữa !
Không cần một plugin toàn bộ. Điều này sẽ trả lại RSS của bạn dưới dạng đối tượng JSON cho hàm gọi lại:
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);
}
});
}
Sử dụng jFeed - một plugin jQuery RSS / Atom. Theo các tài liệu, nó đơn giản như:
jQuery.getFeed({
url: 'rss.xml',
success: function(feed) {
alert(feed.title);
}
});
Đối với những người trong chúng ta đến thảo luận muộn, bắt đầu với 1.5 jQuery có các khả năng phân tích cú pháp xml tích hợp, điều này giúp thực hiện điều này khá dễ dàng mà không cần plugin hoặc dịch vụ của bên thứ 3. Nó có chức năng parseXml và cũng sẽ tự động phân tích xml khi sử dụng hàm $ .get. Ví dụ:
$.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()
luôn trả về chuỗi rỗng ''?
jFeed không hoạt động trong IE.
Sử dụng zRSSFeed . Nó đã hoạt động trong 5 phút
Cập nhật (ngày 15 tháng 10 năm 2019)
Tôi đã trích xuất logic cốt lõi từ jquery-rss sang một thư viện mới có tên Vanilla RSS đang sử dụng API tìm nạp và có thể hoạt động mà không cần phụ thuộc thê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');
});
Nguyên
bài đăng:
Bạn cũng có thể sử dụng jquery-rss , đi kèm với templating đẹp và siêu dễ sử dụng:
$("#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>'
})
sản lượng (tính đến ngày 18 tháng 9 năm 2013):
<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>
Xem http://jsfiddle.net/sdepold/ozq2dn9e/1/ để biết ví dụ hoạt động.
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>
Sử dụng API nguồn cấp dữ liệu AJAX của Google trừ khi dữ liệu RSS của bạn ở chế độ riêng tư. Nó nhanh, tất nhiên.
CẬP NHẬT [ 25/11/2016 ] Phiên bản được viết và hỗ trợ đầy đủ tốt hơn với nhiều tùy chọn và khả năng được lưu trữ tại GitHub.jQRSS
Tôi đã thấy Câu trả lời được chọn của Nathan Strutz , tuy nhiên, liên kết trang Plugin jQuery vẫn không hoạt động và trang chủ của trang đó dường như không tải. Tôi đã thử một vài giải pháp khác và thấy hầu hết trong số chúng là, không chỉ lỗi thời, mà còn DỄ DÀNG ! Vì vậy, tôi đã ném chiếc mũ của mình ra khỏi đó và tạo ra plugin của riêng mình, và với các liên kết chết ở đây, đây có vẻ như là một nơi tuyệt vời để gửi câu trả lời. Nếu bạn đang tìm kiếm câu trả lời này vào năm 2012 (sớm đến b 2013), bạn có thể nhận thấy sự thất vọng của các liên kết chết và lời khuyên cũ ở đây như tôi đã làm. Dưới đây là một liên kết đến ví dụ plugin hiện đại của tôi cũng như mã đến plugin! Chỉ cần sao chép mã vào tệp JS và liên kết nó trong tiêu đề của bạn giống như bất kỳ plugin nào khác. Sử dụng là EZ TUYỆT VỜI!
Plugin Plugin
2/9/2015 - thực hiện cập nhật quá hạn dài để kiểm traconsole
trước khi gửi lệnh đến nó! Cần giúp đỡ với các vấn đề IE cũ hơn.
(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);
SỬ DỤNG
// 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 ('Tìm kiếm từ ở đây thay vì liên kết', hàm (nguồn cấp dữ liệu) {/ * thực hiện công việc * /})
// TODO: Cần sửa
Tùy chọn
{
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>
Tôi đồng ý với @Andrew , sử dụng Google là một cách chắc chắn, có thể sử dụng lại để làm điều đó với lợi ích to lớn mà bạn nhận được JSON thay vì XML. Một lợi thế bổ sung của việc sử dụng Google làm proxy là các dịch vụ có thể chặn quyền truy cập trực tiếp của bạn vào dữ liệu của họ không có khả năng ngăn chặn Google. Dưới đây là một ví dụ sử dụng báo cáo trượt tuyết và dữ liệu điều kiện. Điều này có tất cả các ứng dụng trong thế giới thực phổ biến: 1) RSS / XML 2 của bên thứ ba) JSONP 3) Làm sạch chuỗi và chuỗi thành mảng khi bạn không thể lấy dữ liệu chính xác theo cách bạn muốn 4) khi tải các phần tử vào DOM. Hy vọng điều này sẽ giúp một số người!
<!-- 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 hơi lỗi thời, chỉ hoạt động với các phiên bản cũ hơn của jQuery. Đã hai năm kể từ khi nó được cập nhật.
zRSSFeed có lẽ kém linh hoạt hơn một chút, nhưng nó dễ sử dụng và nó hoạt động với phiên bản hiện tại của jQuery (hiện là 1.4). http://www.zazar.net/developers/zrssfeed/
Dưới đây là một ví dụ nhanh từ các tài liệu zRSSFeed:
<div id="test"><div>
<script type="text/javascript">
$(document).ready(function () {
$('#test').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
limit: 5
});
});
</script>
Tôi đang sử dụng jquery với yql cho nguồn cấp dữ liệu. Bạn có thể truy xuất twitter, rss, buzz với yql. Tôi đọc từ http://tutorialzine.com/2010/02/feed-widget-jquery-css-yql/ . Nó rất hữu ích cho tôi.
Tôi khuyên bạn nên sử dụng FeedEk . Sau khi Google Feed API chính thức không còn hoạt động, hầu hết các plugin không hoạt động. Nhưng FeedEk vẫn hoạt động. Nó rất dễ sử dụng và có nhiều tùy chọn để tùy chỉnh.
$('#divRss').FeedEk({
FeedUrl:'http://jquery-plugins.net/rss'
});
Với các tùy chọn
$('#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>
Sử dụng google ajax api , được lưu trữ bởi google và bất kỳ định dạng đầu ra nào bạn muốn.
Mẫu mã; http://code.google.com.vn/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 được xây dựng trên jQuery và chủ đề đơn giản là tuyệt vời.
Hãy thử một lần.
Dự án jQuery-rss khá nhẹ và không áp đặt bất kỳ kiểu dáng cụ thể nào.
Cú pháp có thể đơn giản như
$("#rss-feeds").rss("http://www.recruiter.com/feed/career.xml")
Xem một ví dụ hoạt động tại http://jsfiddle.net/jhfbler/AFHfn/
Nguồn cấp dữ liệu jQuery là một tùy chọn tốt, nó có hệ thống tạo khuôn mẫu tích hợp và sử dụng Google Feed API, do đó, nó có hỗ trợ tên miền chéo.
Superfeedr có một plugin jquery làm điều đó rất tốt. Bạn sẽ không có bất kỳ vấn đề Chính sách nguồn gốc chéo nào và các bản cập nhật được lan truyền trong thời gian thực.
jFeed rất dễ và có một ví dụ để bạn kiểm tra. Nhưng nếu bạn đang phân tích nguồn cấp dữ liệu từ một máy chủ khác, bạn sẽ cần cho phép Chia sẻ tài nguyên nguồn gốc chéo (CORS) trên máy chủ của nguồn cấp dữ liệu. Bạn cũng cần kiểm tra hỗ trợ trình duyệt .
Tôi đã tải lên mẫu nhưng vẫn không nhận được hỗ trợ từ IE ở bất kỳ phiên bản nào khi tôi thay đổi url trong ví dụ thành ví dụ như example.com/feed.rss thông qua giao thức http. CORS nên được hỗ trợ cho IE 8 trở lên nhưng ví dụ jFeed không hiển thị nguồn cấp dữ liệu.
Đặt cược tốt nhất của bạn là sử dụng API của Google:
https://developers.google.com/feed/v1/devguide
Xem:
https://github.com/jfhovinne/jFeed
http://en.wikipedia.org/wiki/Cross-origin_resource_shishing
http://en.wikipedia.org/wiki/Same_origin_policy
http://caniuse.com/cors