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

Question

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

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

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

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

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

Answer 1

请参阅会话上载进度功能。

启用后，PHP将在用户会话中存储上载进度信息。 然后，您可以通过执行一些ajax拉取来获取此数据。

或者，APC具有类似的功能 。

Answer 2

arnaud576875的答案适用于实际的文件上传（您说可能需要或可能不需要几秒钟）。 您可能需要这两种方法。 一般来说，PHP中没有用于跟踪脚本内部进度的机制 - PHP也不知道它处于什么样的状态，也不一定要将任何数据返回给调用者直到结束（即使它确实如此，你的JS也不会收到部分输出）。

执行此操作的标准方法是让浏览器不断轮询服务器以获取脚本的进度。 上传是分开的，所以你也需要找到它并合并这两个数字 - 这需要估计每个任务（上传，处理）需要多长时间以及一些好的代数技能。

在您的脚本中，您需要确定完成的百分比（如果您有一个很大的foreach循环，这很容易）并将其存储在某处（数据库，文件，APC）。 您还需要一种识别用户的方法（user_id和/或从javascript传递随机数作为ID）。

然后，您的轮询脚本（例如，每2秒）将通过传递唯一ID来获取脚本进度的此编号。

Answer 3

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

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

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中的文件旁边添加一条消息，例如“处理”。 ..“。 我已经假设，随着最后一个字节的发送，服务器正在对文件执行一些任务，我现在只是在等待响应。

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

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

听起来好像Firefox可能会遵循XHR V2规范的字母，而Chrome则秉承规范的“精神”。 Chrome的实现导致在最后一个字节被“发送”之后触发的最后一个进度事件是大多数人可能期望的，但这可能只是违反了规范。 不知道IE10到底做了什么，因为我还没有考虑过。 FF开发人员在w3.org上开了一个帖子，要求澄清一下。

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

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

总而言之，这适用于Chrome和Safari，但不适用于FireFox。 我不记得这是否适用于IE10。 我永远不会记得因为我不使用IE。 在Firefox中，进度指示器一旦达到99％左右就会卡住，直到收到响应。

请注意，只有在用户代理支持File API的情况下，才能进行所有此进度跟踪。 这留下了IE9和更老。 对于非文件API浏览器，有几个选项：

1. 建立某种涉及客户端和服务器理解的GET请求的约定。 客户端会定期向服务器发送GET请求，服务器必须响应文件进度。 FYI Fine Uploader有一个预定的功能请求 ，可以更多地了解这一点，尽管我对这种方法并不是很疯狂。
2. 另一种选择，似乎更好一些，但可能有点限制（因为它取决于应用程序服务器）是利用nginx中的UploadProgress模块​​（如果您不熟悉则发音为Engine-X）。 我被告知Apache有一个类似的模块，但是我无法找到任何相关的文档（尽管我根本没有考虑过这个）。 Fine Uploader也有[功能请求（ https://github.com/Widen/fine-uploader/issues/506 ），我将在不久的将来调查。

希望这能回答你的问题。