在等待响应时确定AJAX请求是否已完成

Question

我有一个AJAX表单,用户可以上传CSV文件.这些文件相当小,服务器端处理将比实际文件上载花费更多时间.然而,上传可能仍需要一两秒钟,具体取决于文件大小和连接速度.此外,用户必须知道服务器端操作是成功还是失败.

现在我想区分"上传文件"和"等待响应",这样我就可以向用户显示相应的消息/指示图标等.

我正在使用jQuery $.ajax,我可以在其中指定complete()-callback.但是,在收到服务器的响应之前,这不会触发.据我所知,没有requestComplete()-callback.

那么,简而言之,有没有办法检测AJAX请求是否已完全发送到服务器,即使服务器没有响应呢？

如果可能的话,我宁愿不在服务器和客户端推送(WebSockets或Comet等)上使用异步处理.(服务器运行PHP).

Answer 1

根据您的评论中的要求，这是我的评论的更完整的解释。

就跟踪上传进度而言，这是可能的，无需编写特定的服务器端代码来支持跟踪上传进度。正如您所提到的，我正在谈论onprogressXMLHttpRequest level 2 提供的事件。它非常容易使用。看一下我刚才提到的链接的一小部分：

var oReq = new XMLHttpRequest();

oReq.addEventListener("progress", updateProgress, false);

oReq.open();

oReq.send(something);

// progress on transfers from the server to the client (downloads)
function updateProgress (oEvent) {
  if (oEvent.lengthComputable) {
    var percentComplete = oEvent.loaded / oEvent.total;
    // ...
  } else {
    // Unable to compute progress information since the total size is unknown
  }
}

至于你问题中提到的另一项：

我想区分“上传文件”和“等待响应”，这样我可以向用户显示相应的消息/指示器图标等。

这在理论上当然是可能的。我在我维护的跨浏览器上传库中所做的事情，Fine Uploader中所做的就是等待最后一个字节发送（根据我的进度处理程序），然后在 UI 中的文件旁边添加一条消息，例如“processing.txt”。 ……”。我假设，当最后一个字节已发送时，服务器正在文件上执行一些任务，而我现在只是在等待响应。

我说这在理论上是可以检测到的，但在实践中跨浏览器是不可能的。为什么？我在 Fine Uploader Github 存储库中的一个案例中对此进行了评论。我将在这里包含我的全部评论：

我注意到 Firefox 在收到服务器的响应之前不会触发最后一个进度事件，这有点令人失望。火狐浏览器存在问题被提交来跟踪这个“问题”。

听起来 Firefox 实际上可能遵循 XHR V2 规范的文字，而 Chrome 则遵循该规范的“精神”。Chrome 的实现会导致在“发送”最后一个字节后触发最后一个进度事件，这是大多数人所期望的，但这可能违反了规范。还不确定 IE10 做了什么，因为我还没有研究过。一位 FF 开发人员在 w3.org 上开了一个帖子，要求提供一些说明。

Chromium 开发人员认为“预期”行为实际上是 webkit 的细节，而不是 Chrome 特有的。这表明 Safari 和 Chrome 表现出相同的行为，我已经验证了这一点。听起来好像有人在推动调整规范，以允许 webkit 的行为成为预期的行为（根据规范的字母）。

请注意，我没有使用“loadend”事件来确定浏览器何时完成发送最后一个字节。我只是在处理“进度”事件通知时将“已加载”值与“总计”值进行比较。如果这两个值相等，我将声明文件“已完全发送”。根据规范，我应该能够做到这一点（我认为），因为“loadend”事件是在最后一个“progress”事件之后简单地触发的。有关更多详细信息，请参阅有关ProgressEvent 的规范。

总而言之，这在 Chrome 和 Safari 中运行良好，但在 FireFox 中则不行。我不记得这是否适用于 IE10。我记不清了，因为我不怎么用IE。在 Firefox 中，进度指示器一旦达到接近 99% 左右就会卡住，直到收到响应。

请注意，正如我所说，只有用户代理支持文件 API，所有这些进度跟踪才可能实现。IE9 及更旧版本除外。对于非文件 API 浏览器，有几个选项：

1. 建立某种客户端和服务器都能理解的涉及 GET 请求的约定。客户端会定期向服务器发送 GET 请求，服务器必须响应文件进度。仅供参考，Fine Uploader 有一个预定的功能请求来进一步研究这个问题，尽管我并不真正喜欢这种方法。
2. 另一种选择，看起来更好一些，但可能有更多限制（因为它取决于应用程序服务器），是使用 nginx 中的 UploadProgress 模块（如果您不熟悉的话，发音为 Engine-X）。有人告诉我 Apache 有一个类似的模块，但我无法找到任何相关文档（尽管我根本没有研究过这么多）。Fine Uploader 也有[对此的功能请求（https://github.com/Widen/fine-uploader/issues/506），我也会在不久的将来进行调查。

希望这能回答您的问题。