Javascript for pulling from a cross-domain xml file: for dummies

I had an assignment at work, to write a small piece of plug and play script for one of our clients.
They needed to read from our rss feed, and display the content on their webpage.

Now, there are many server site solutions for this, however, its gets a little tricky when you need to parse the xml only using javascript.

Here’s one solution that works, but ON THE SAME DOMAIN.

After some amount of struggle, here’s a solution that I stumbed across to get this to work CROSS-DOMAIN and tweaked for my use.
Here’s where I found the answer (in case you are interested): http://plugins.jquery.com/project/jgfeed

This script uses Google Feeds API and jQuery plugin.

Example:

Step 1: Include the following scripts on your page:

<script src=”jquery.js”></script>
<script src=”jquery.jgfeed.js”></script>

Step 2: Include the html into which you are going to inject the response & customize the display on your page using CSS.

A) Include the css file that apply’s styles to the content that you display. I have customized this based on the content that I’m displaying:

<link rel=”stylesheet” type=”text/css” media=”all” href=”style.css” />

B) Include the following html on your page. This is the ul tag that you’re going to inject your response into.
I have this as a UL tag because I’m injecting li tags into this

<ul id=”entry-display”>
<h1>content</h1>
</ul>

Step 3: Here’s an example of the snippet that you need to include.

var randomnumber=Math.floor(Math.random()*1000000); //to ensure that the response isn’t cached
var tofetchfrom = “http://contest.shutterfly.com/contests/viewallentriesincontestrss/7234?v=”+randomnumber;

$.jGFeed(tofetchfrom,
function(feeds){
// Check for errors
if(!feeds){
// there was an error
return false;
}
// do whatever you want with feeds here
for(var i=0; i<feeds.entries.length; i++){
var entry = feeds.entries[i];

// defining variables of the information that I needed to display on my page.
// there are only specific xml nodes that you can pull from (some of them below)
var title = entry.title; // <title>title</title>
var url = entry.link;  // <link>url</link>
var mycontent = entry.content; // <description>description</description>

//i’m injecting this into a ul with an id of entry-display.
//Remember, since this script is appending to the content, you need to have some default content is the ul tags
//for this piece of script to work. You can customize the html / content that you want to use

$(‘<li></li>’).html(‘<a href=”‘+url+'”>’+mycontent+'</a><h5><a href=”‘+url+'”>’+title+'</a></h5>’).appendTo(‘#entry-display’);
}
}, 8);

This example pulls 8 entries from the rss @ http://contest.shutterfly.com/contests/viewallentriesincontestrss/7234
You can customize the feed, number and the piece of code to inject this based on what / how you want displayed.

Step 4: We’re DONE! As simple as that.

CLICK HERE TO VIEW THE EXAMPLE
CLICK HERE TO DOWNLOAD THE WORKING EXAMPLE