对文件发出 json/jsonp xhr 请求：协议

Question

我正在编写一个 javascript 应用程序，它将托管在 file: 协议上（即：该应用程序只是位于我硬盘驱动器上某个位置的 html、css 和 javascript 的文件夹）。当我尝试正常的 XHR 请求时，它们由于同源策略问题而失败。

所以我的问题是，如上所述，使用应用程序请求 json/jsonp 文件的最佳方式是什么？

注意：到目前为止，我已经使用硬编码回调函数获得了所有 jsonp 文件，但我希望能够对这些请求使用动态回调函数。有没有办法做到这一点？

Answer 1

这是一种棘手的工作，但它会给你带来动态回调。基本上，它依赖于 file: 传输速度相当快的事实。它建立一个请求队列并一次发送一个请求。这是我能找到的确保可以链接正确的响应和回调（以保证的顺序）的唯一方法。希望有人能想出更好的方法，但在无法动态生成响应的情况下，这是我能做的最好的事情。

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);
      }
  }

};

这就是我测试

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'
});

Answer 2

出于安全原因，Chrome 对从 file:// url 进行 ajax 调用有非常严格的限制。他们知道这会破坏本地运行的应用程序，并且

Ajax 在 Firefox 中可以很好地处理文件 url，只需注意返回代码不是 http 状态代码；即，0 表示成功，而不是 200-299 + 304。IE

处理这些安全问题的方式与 Chrome 和 Firefox 不同，我希望其他浏览器都有自己的方法。 Web 和桌面应用程序之间的边界是一个非常有问题的领域。