making json/jsonp xhr requests on the file: protocol

Question

I'm writing a javascript app that will be hosted on a file: protocol (ie: the application is just a folder of html, css, and javascript sitting someplace on my hard drive). When I try normal XHR requests they fail because of the same origin policy afaict.

So my question is this, what's the best way to request json/jsonp files with an app as described above?

Note: So far I've got all of my jsonp files using a hard-coded callback functions, but I'd like to be able to use dynamic callback functions for these requests.. is there a way to do this?

Answer 1

This is kind of a hatchet job, but it will get you your dynamic callbacks. Basically it counts on the fact that file: transfers will be pretty fast. It sets up a queue of requests and sends them out one at a time. That was the only way I could figure out to make sure that the correct response and callback could be linked (in a guaranteed order). Hopefully someone can come up with a better way, but without being able to dynamically generate the responses, this is the best I can do.

var JSONP = {
  queue: [],
  load: function(file, callback, scope) {
      var head = document.getElementsByTagName('head')[0];
      var script = document.createElement('script');
      script.type = "text/javascript";
      script.src = file;
      head.appendChild(script);
  },

  request: function(file, callback, scope) {
      this.queue.push(arguments);
      if (this.queue.length == 1) {
          this.next();
      }
  },

  response: function(json) {
      var requestArgs = this.queue.shift();
      var file = requestArgs[0];
      var callback = requestArgs[1];
      var scope = requestArgs[2] || this;
      callback.call(scope, json, file);

      this.next();
  },

  next: function() {
      if (this.queue.length) {
          var nextArgs = this.queue[0];
          this.load.apply(this, nextArgs);
      }
  }

};

This is what I did to test

window.onload = function() {
  JSONP.request('data.js', function(json, file) { alert("1 " + json.message); });
  JSONP.request('data.js', function(json, file) { alert("2 " + json.message); });
}

Data.js

JSONP.response({
  message: 'hello'
});