Proxy Issues with Javascript Cross Domain RSS Feed Parsing

Question

This is my Javascript function which grabs an rss feed via the proxy script and then spits out the 5 latest rss items from the feed along with a link to my stylesheet:

    function getWidget (feed,limit) {  if (window.XMLHttpRequest) {
        xhttp=new XMLHttpRequest()
    } else {
        xhttp=new ActiveXObject("Microsoft.XMLHTTP")
    }
    xhttp.open("GET","http://MYSITE/proxy.php?url="+feed,false);
    xhttp.send("");
    xmlDoc=xhttp.responseXML;
    var x = 1;
    var div = document.getElementById("div");
    div.innerHTML = '<link type="text/css" href="http://MYSITE/css/widget.css" rel="stylesheet" /><div id="rss-title"></div></h3><div id="items"></div><br /><br /><a href="http://MYSITE"&gt;Powered by MYSITE</a>';
    document.body.appendChild(div);
    content=xmlDoc.getElementsByTagName("title");
    thelink=xmlDoc.getElementsByTagName("link");
    document.getElementByTagName("rss-title").innerHTML += content[0].childNodes[0].nodeValue;
    for (x=1;x<=limit;srx++) {
        y=x;
        y--;
        var theitem = '<div class="item"><a href="'+thelink[y].childNodes[0].nodeValue+'">'+content[x].childNodes[0].nodeValue+'</a></div>';
        document.getElementById("items").innerHTML += theitem;
    }  }

Here is the the code from proxy.php:

    $session = curl_init($_GET['url']);                    // Open the Curl session
curl_setopt($session, CURLOPT_HEADER, false);          // Don't return HTTP headers
curl_setopt($session, CURLOPT_RETURNTRANSFER, true);   // Do return the contents of the call
$xml = curl_exec($session);                            // Make the call
header("Content-Type: text/xml");                  // Set the content type appropriately
echo $xml;        // Spit out the xml
curl_close($session); // And close the session

Now when I try to load this on any domain that's not my site nothing loads. I get no JS errors, but I in the Console tab in firebug I get "407 Proxy Authentication Required"

So I'm not really sure how to make this work.

The goal is to be able to grab the RSS feed, parse it to grab the titles and links and spit it out into some HTML on any website on the web. I"m basically making a simple RSS widget for my site's various RSS feeds.

My Javascript is wack

I'm really a beginner with Javascript. I know jQuery pretty well, but I wasn't able to use it in this case, because this script will be embeded on any site and I can't really rely on the jQuery library. So I decided to write some basic Javascript relying on the default XML parsing options available. Any suggestions here would be cool. Thanks!

What's with the x and y vars

They way my site creates RSS feeds is that the first title is actually the RSS feed title. The second title is the title of the first item. The first link is the link to the first item. So when using the javascript to get the title, I had to first grab the first title (which is the RSS title) and then start with the second title that being the first title of the item. Sorry for the confusion, but I don't think this is related to my issue. Just wanted to clarify my code.

Answer 1

Since I discovered YQL, it's my method of choice when dealing with these types of use cases because I can keep everything in JavaScript and not have to worry about cross-domain proxies. Even better, you'll be able to offload all the processing to the client.

This simple query will do it for you: select title, link from rss where url='http://rss.news.yahoo.com/rss/topstories'

Permalink to query: https://developer.yahoo.com/yql/console/?q=select%20title%2C%20link%20from%20rss%20where%20url%3D%27http%3A%2F%2Frss.news.yahoo.com%2Frss%2Ftopstories%27

Sample snippet:

<script>

function cbfunc(data){
  for(var i in data.query.results.item) {
    var item = data.query.results.item[i];
    console.log(item.title);
    console.log(item.link);
  }
}

function execYQL(yql, callbackFuncName) {
    var url = "http://query.yahooapis.com/v1/public/yql?q=" + encodeURIComponent(yql) + "&format=json&callback=cbfunc";
    var head= document.getElementsByTagName('head')[0];
    var script= document.createElement('script');
    script.type= 'text/javascript';
    script.src= url;
    head.appendChild(script);
}

execYQL("select title, link from rss where url='http://rss.news.yahoo.com/rss/topstories'");

</script>

Just cut & paste that into an HTML file and crack open firebug to inspect further.