XMLHttpRequest：“setRequestHeader”时的 Firefox 问题答案

【问题标题】：XMLHttpRequest : Firefox Issue when "setRequestHeader"XMLHttpRequest：“setRequestHeader”时的 Firefox 问题
【发布时间】：2013-06-16 05:35:58
【问题描述】：

我必须为我的 ajax 调用 (POST) 设置自定义请求标头。由于我支持客户端/服务器框架 (ZK)，因此我无法掌握整个过程（从 open() 到 send()）。这就是为什么我只能按如下方式设置请求标头，覆盖原生的“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.setRequestHeader(...) 时 xhr.readyState 仍然等于 1。

然而，对于 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()”，或者在另一个“原型”处理程序中？

非常感谢。

【问题讨论】：

发送请求前设置headers即可。

标签： javascript ajax firefox xmlhttprequest zk

【解决方案1】：

我最终通过直接覆盖原生的 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");
  }
};

【讨论】：