Use Yahoo pipes and jquery to make an RSS pendant

If we want to post updates for one site to another site in real time, the best way to do that is to reprint it via RSS. Using JavaScript is the most feasible way to do this if you simply need to be prompted for an updated entry. But parsing an XML document through JavaScript is cumbersome. Luckily, Yahoo pipes provides us with a very good RSS to JSON feature, we can convert RSS to JSON and then use JavaScript to parse, which is much simpler than parsing XML directly!

Convert RSS to JSON

First log in to http://pipes.yahoo.com and create a new Pipe (creat a Pipe). Then select the Sources > Fetch feed in the tool on the left and enter an RSS address in the input box. Then use the line to connect the Fetch Feed with the Pipe Output two boxes (as shown on the right), save the Pipe, and click Run Pipe at the top .... Click Publish to publish the Pipe, and then write down the URL of get as JSON. A few simple steps have been made to convert an RSS to JSON, and this JSON will be updated automatically according to the RSS update.

Parsing JSON through JQuery

JQuery itself provides us with a getjson () function that provides a quick and easy way to parse JSON.

Because I want to do an AJAX loading project, I first do an HTML frame and then add the parsed content to the specified container through the Append method of JQuery. The HTML framework is as follows:

The following are the referenced contents: <div id= "Rssdata" > <ul class= "Rss-items" ></ul> <div class= "Loading" >loading RSS items...</div> </div> <p> then write JQuery call:</p>

The following are the referenced contents: <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 = The URL you just noted + &_ 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 what information is exported $ ( data. ) Value . Items ) . each ( function ( index , item ) { var item_html = ' <li><a href= ' + item . Link + ' > ' + item . title + ' </a></li> ' ; //Insert the output into the page $ ( ' #rssdata ul.rss-items ' ) . Append ( item_html ) ; } ) ; //Add entry Load effect $ ( ' #rssdata div.loading ' ) . fadeout ( ) ; $ ( ' #rssdata ul.rss-items ' ) . Slidedown ( ) ; } ) ; } ) ; </ script

Of course, if the page is beautiful, it is necessary to write some CSS, this can be determined by their own preferences. The final effect can be seen in this DEMO.