Use Yahoo Pipes and jQuery to create an RSS pendant

If we want to publish the update fact of a website to a website, the best way is to repost it through RSS. If you only need to make a simple prompt on the updated entries, using JavaScript is the most feasible method. However, parsing an XML document using JavaScript is very troublesome. Fortunately, Yahoo Pipes provides us with a very good RSS to JSON function. We can convert RSS to JSON and use JavaScript for parsing first, which is much easier than directly parsing XML!

Convert RSS to JSON

　　

First log on to the http://pipes.yahoo.com and create a new Pipe (Creat a Pipe ). Select Sources> Fetch Feed in the tool on the left, and enter an RSS address in the input box. Use a line to connect the Fetch Feed and Pipe Output boxes (for example), save the Pipe, and click Run Pipe... . Click Publish to Publish the Pipe and write down the URL of Get as JSON. The RSS has been converted to JSON in a few steps, and the JSON will be automatically updated based on RSS updates.

Parse JSON using jQuery

JQuery itself provides us with a getJSON () function, which provides us with a simple and quick way to parse JSON.

Because I want to implement an AJAX loading project, I first create an HTML framework and add the parsed content to the specified container through the jQuery append method. The HTML framework is as follows:

Copy to ClipboardReference: [www.bkjia.com] <div id = "rssdata">
<Ul class = "rss-items"> </ul>
<Div class = "loading"> Loading RSS items... </div>
</Div>
<P> then write jQuery call: </p>
Copy to ClipboardReference: [www.bkjia.com] <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
<Script type = "text/javascript">
$ ('# Rssdata'). ready (function (){
// JSON address = URL + & _ callback =?
Var pipe_url = 'HTTP: // pipes.yahoo.com/pipes/pipe.run? _ Id = 90caf3b6ba8f36459a3137248b47620e & _ render = json & _ callback =? ';

$. GetJSON (pipe_url, function (data ){
// Traverse the JSON project and determine the output information
$ (Data. value. items). each (function (index, item ){
Var item_html = '<li> <a href = "' + item. link + '">' + item. title + '</a> </li> ';
// Insert the output content into the page
$ ('# Rssdata ul. rss-items'). append (item_html );
});
// Add entry loading effect
$ ('# Rssdata div. loading'). fadeOut ();
$ ('# Rssdata ul. rss-items'). slideDown ();
});
});
</Script>

Of course, it is necessary to write some CSS if the page is beautiful. This can be determined based on your preferences. You can see the final effect.DEMO

Link: http://blog.imbolo.com/create-a-simple-ajax-rss-widget-with-jquery-and-yahoo-pipes/