javascript - 对文件 : protocol 发出 json/jsonp xhr 请求

Question

我正在编写一个将托管在 file: 协议(protocol)上的 javascript 应用程序(即:该应用程序只是一个包含 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); });
}

数据.js

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