javascript - XMLHttp请求 : Firefox Issue when "setRequestHeader"

Question

我必须为我的 ajax 调用 (POST) 设置自定义请求 header 。由于我使用客户端/服务器框架( ZK )，因此我无法掌握整个过程(从 open() 到 send())。这就是为什么我只能按如下方式设置请求 header ，覆盖 native “onsomething”函数:

var zk_native_function_to_instanciate_a_xhr_OLD = zk_native_function_to_instanciate_a_xhr();
zk_native_function_to_instanciate_a_xhr = function() {
    var xhr = zk_native_function_to_instanciate_a_xhr_OLD ();
    xhr.onloadstart = function () {
      if (xhr.readyState === 1) {
        xhr.setRequestHeader("XX-MY-CUSTOM-HEADER", "foobarhimself");
      }
    }
};

这在 Chrome 上运行得很好，但在 Firefox 上根本不起作用。关键是，使用 Firefox，当我在“if”行放置断点时，我只会进入就绪状态 4。使用 Chrome，我的断点成功停止，xhr.readyState 等于“1”(xhr.OPENED)，并且在执行 xhr 时 xhr.readyState 仍然等于 1。 setRequestHeader(...).

然而，在 Chrome 和 Firefox 中，zk_native_function_to_create_a_xhr_OLD() 都会返回 XMLHttpRequest 对象的实例(具有相同的默认属性)。

两个电话，即。 Chrome 和 Firefox 上的 send() 是异步进行的。最重要的是，当我删除 firebug 上的断点时，我的行 xhr.setRequestHeader 似乎已到达，因为执行时我在控制台上收到以下错误:

InvalidStateError:尝试使用不可用或不再可用的对象

在我看来，这是因为在调用 xhr.setRequestHeader() 时，xhr.readyState 已经等于 '4'...它的值以生命的速度从 1 变为 4!

如何解决这个问题？还是有另一种方法可以调用“xhr.setRequestHeader()”，或者在另一个“可原型(prototype)化”的处理程序中？

非常感谢。

Answer 1

我最终通过直接重写 native open() 函数解决了这个问题，该函数恰好在嵌入式框架中被调用。

var zk_native_function_to_instanciate_a_xhr_OLD = zk_native_function_to_instanciate_a_xhr();
zk_native_function_to_instanciate_a_xhr = function() {
  var xhr = zk_native_function_to_instanciate_a_xhr_OLD ();
  var xhr_open_base = xhr.open;
  // native XmlHttpRequest.open() signature from XmlHttpRequest API
  xhr.open = function (method, url, async, user, password) {
    xhr_open_base.apply(this, arguments);
    xhr.setRequestHeader("XX-MY-CUSTOM-HEADER", "foobarhimself");
  }
};