Javascript works great locally, but not on my server

I'm teaching myself javascript by creating a script for displaying an external rss feed on a webpage.

The code I patched together works great locally. This is a screen grab of the code producing exactly the desired behavior. The code is populating all the information inside the section "Blog: Shades of Gray", except for "tagged" which I hard coded:

But when I upload the site files to my server, the code doesn't work at all. This is a screen grab of the code on my site NOT producing the desired behavior...

This feels like I'm not getting something really basic about how javascript works locally vs. on the server. I did my half hour of googling for an answer and no trails look promising. So I'd really appreciate your help.

This is my site (under construction) http://jonathangcohen.com

Below is the code, which can also be found at http://jonathangcohen.com/grabFeeds.js.

/*Javascript for Displaying an External RSS Feed on a Webpage
Wrote some code that’ll grab attributes from an rss feed and assign IDs for displaying on a webpage. The code references my Tumblr blog but it’ll extend to any RSS feed.*/

window.onload = writeRSS;

function writeRSS(){
    writeBlog();
}

function writeBlog(){
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.open("GET","http://blog.jonathangcohen.com/rss.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML; 
    var x=xmlDoc.getElementsByTagName("item");
    //append category to link
    for (i=0;i<3;i++)
      {     
      if (i == 0){
          //print category
          var blogTumblrCategory = x[i].getElementsByTagName("category")[0].childNodes[0].nodeValue
          document.getElementById("getBlogCategory1").innerHTML =  
         '<a class="BlogTitleLinkStyle" href="http://blog.jonathangcohen.com/tagged/'+blogTumblrCategory+'">'+blogTumblrCategory+'</a>';
          //print date
          var k = x[i].getElementsByTagName("pubDate")[0].childNodes[0].nodeValue
          thisDate = new Date();
          thisDate = formatTumblrDate(k);
          document.getElementById("getBlogPublishDate1").innerHTML = thisDate;
          //print title
          var blogTumblrTitle = x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue
          var blogTumblrLink = x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue
          document.getElementById("getBlogTitle1").innerHTML =
          '<a class="BlogTitleLinkStyle" href="'+blogTumblrLink+'">'+blogTumblrTitle+'</a>';
          }
     if (i == 1){
        //print category
        var blogTumblrCategory = x[i].getElementsByTagName("category")[0].childNodes[0].nodeValue
        document.getElementById("getBlogCategory2").innerHTML = 
        '<a class="BlogTitleLinkStyle" href="http://blog.jonathangcohen.com/tagged/'+blogTumblrCategory+'"&开发者_如何学Gogt;'+blogTumblrCategory+'</a>';
        //print date
        var k = x[i].getElementsByTagName("pubDate")[0].childNodes[0].nodeValue
        thisDate = new Date();
        thisDate = formatTumblrDate(k);
        document.getElementById("getBlogPublishDate2").innerHTML = thisDate;
        //print title
        var blogTumblrTitle = x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue
        var blogTumblrLink = x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue
        document.getElementById("getBlogTitle2").innerHTML =
        '<a class="BlogTitleLinkStyle" href="'+blogTumblrLink+'">'+blogTumblrTitle+'</a>';
        }
     if (i == 2){
        //print category
        var blogTumblrCategory = x[i].getElementsByTagName("category")[0].childNodes[0].nodeValue
        document.getElementById("getBlogCategory3").innerHTML = 
        '<a class="BlogTitleLinkStyle" href="http://blog.jonathangcohen.com/tagged/'+blogTumblrCategory+'">'+blogTumblrCategory+'</a>';
        //print date
        var k = x[i].getElementsByTagName("pubDate")[0].childNodes[0].nodeValue
        thisDate = new Date();
        thisDate = formatTumblrDate(k);
        document.getElementById("getBlogPublishDate3").innerHTML = thisDate;
        //print title
        var blogTumblrTitle = x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue
        var blogTumblrLink = x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue
        document.getElementById("getBlogTitle3").innerHTML =
        '<a class="BlogTitleLinkStyle" href="'+blogTumblrLink+'">'+blogTumblrTitle+'</a>';
        }
      }
}

function formatTumblrDate(k){
    d = new Date(k);
    var curr_date = d.getDate();
    var curr_month = d.getMonth();
    curr_month++;
    var curr_year = d.getFullYear();
    printDate = (curr_month + "/" + curr_date + "/" + curr_year);
    return printDate;
}

Thank you!

You are running into the same origin policy, which has been discussed many times on Stack Overflow.

AJAX runs on a same-origin policy, ie, you can only call your own server.

A fix would be making a call to your server which in turn calls the target server.

Here's how (to give you a general picture ;))

You are doing an XmlHttpRequest to another domain, crossing the security sandbox and going against the same-origin policy, which means the request to blog.jonathangcohen.com/rss.xml fails, and you get nothing out of it.

The only viable solutions are to either use jsonp or a proxy on your jonathangcohen.com domain, for example a simple php script that would just contain the following would do the trick:

<?php
header('Content-Type: text/xml');
echo file_get_contents('http://blog.jonathangcohen.com/rss.xml');

Then you request the data from http://jonathangcohen.com/rss-proxy.php

This seems like a permissions thing. Cross-site scripting and all. The browser is more lenient on local pages (probably) but won't allow you to do this on an actual server. You'll need to grab that data on the server and then feed it to your javascript.

It's a cross-origin policy thing, which you can read more about here: http://arunranga.com/examples/access-control/

In order for javascript on mydomain.com to fetch resources from blog.mydomain.com, blog.mydomain.com will need to send the response header Access-Control-Allow-Origin: http://mydomain.com

The only other way to do it that I know of would be to setup a script on blog.mydomain.com, such as blog.mydomain.com/feed.php, that will return a valid JSONP response. In order to use it, you would then, instead of using XMLHttpRequest, create a <script> element, and set the source to http://blog.mydomain.com/feed.php. The output from feed.php should call a javascript function and pass in the actual content of the XML feed, if that makes sense.

edit: The other answers will obviously work as well, and the specific answer about using a proxy script on your site (that reads in and spits out the content of the feed) would be even easier and would only require a URL change in your existing javascript.