Why does jQuery throw an error when I request external resources using an Appcache Manifest?

Question

I have an application that uses a .appcache manifest. Everything works as expected, resources get cached:

CACHE MANIFEST

CACHE:
css/images/ajax-loader.gif
[...]

NETWORK:
http://docs.google.com/*

SETTINGS:
prefer-online

Now, when I request a CSV resource from http://docs.google.com like so:

$.get(url, function (data) {
  // do something with the data
}).fail(function () {
  alert("There was an error in loading current data from the server.");
});

the request fails even if I'm acutally online (on both Chrome and FF). Everything worked fine before I used the Appcache.

What is the correct way of requesting external resources while having an Appcache manifest?

Answer 1

As I mentioned in my comment, the problem was not (only) jQuery, but also CORS resp. Google Docs' lack of support of it ("Publish to web" means for download, not for requesting the resource from a different URL, i.e. origin. Apparently Google does not want to add a Header set Access-Control-Allow-Origin "*".

So what I did instead was follow this helpful guide: https://webapps.stackexchange.com/questions/11864/how-can-i-retrieve-records-from-a-google-spreadsheet-in-json-format and https://developers.google.com/gdata/samples/spreadsheet_sample (The URL is now not CSV but JSONP, it also changed to //spreadsheets.google.com/feeds/list/[...]/[...]/public/values?alt=json-in-script and jQuery automatically adds the callback=xxx when called with:

$.ajax({
  url : url,
  type : 'GET',
  dataType : 'jsonp',
  success : function (data) {
    for(var i in data.feed.entry) {
      console.log(entry['gsx$' + 'actualColumnHeader'].$t);
    }
  },
  error : function () {
    alert('Failed');
  }
});

This is not nice or clean by any means (Atom Feed instead of CSV or JSON just to parse it back? Seriously?), but it works for me.

Answer 2

I've just get it working with tabletop. No more CORS issue.. for now.