确定是否AJAX请求已完成，同时等待响应 [英] Determine if AJAX request has completed while still waiting for response

问题描述

我有一个AJAX的形式，用户可以上传CSV文件。这些文件是相当小的和服务器端的处理将需要比实际文件上载更多的时间。尽管如此，上传可能还需要一两秒钟，这取决于文件大小和连接速度。此外，重要的是使用户知道如果服务器侧操作是成功还是失败。

I have an AJAX form where users can upload CSV files. These files are rather small and server-side processing will take much more time than the actual file upload. Nevertheless, the upload might still take a second or two, depending on file size and connection speed. Furthermore, it is important for the user to know if the server-side operation succeeded or failed.

现在我想上传文件和等待响应区别开来，这样我就可以显示相应的信息/指示器图标等，给用户。

Now I would like to distinguish between "uploading file" and "awaiting response", so I can show corresponding messages/indicator icons etc. to the user.

我使用jQuery的 $。阿贾克斯，在那里我可以指定一个完整的（） -callback。但是，这将不火，直到服务器的响应已收到。而据我所知，没有 requestComplete（） -callback。

I'm using jQuery's $.ajax, where I can specify a complete()-callback. But this will not fire until the server's response has been received. And as far as I can tell, there is no requestComplete()-callback.

因此​​，简而言之，有没有一种方法来检测，如果一个AJAX请求已被完全发送到服务器，即使服务器还不响应？

So, in short, is there a way to detect if an AJAX request has been completely sent to the server, even though the server did not respond yet?

我宁愿不诉诸异步处理在服务器和客户端推送（的WebSockets或彗星等），如果可能的话。 （Server运行PHP）。

I'd rather not resort to asynchronous processing on the server and client-push (WebSockets or Comet etc.) if possible. (Server runs PHP).

推荐答案

按照要求在<一个href="http://stackoverflow.com/questions/16739801/determine-if-ajax-request-has-completed-while-still-waiting-for-response/16739844#comment24165292_16739844">your评论，这里是一个更完整的解释<一个href="http://stackoverflow.com/questions/16739801/determine-if-ajax-request-has-completed-while-still-waiting-for-response/16739844#comment24110387_16739844">my评论。

As requested in your comment, here is a more complete explanation of my comment.

据跟踪上传进度，这是可能的，而无需编写特定的服务器端code：支持跟踪上传进度。正如你提到的，我说的是<一href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHtt$p$pquest/Using_XMLHtt$p$pquest?redirectlocale=en-US&redirectslug=DOM%2FXMLHtt$p$pquest%2FUsing_XMLHtt$p$pquest#Monitoring_progress"相对=nofollow> onprogress 通过XMLHtt prequest 2级提供的事件。这是pretty的易于使用。看一看我刚才提到的链接的一小部分：

As far as tracking upload progress, this is possible without having to write specific server-side code to support tracking upload progress. As you mentioned, I was talking about the onprogress event provided by XMLHttpRequest level 2. It's pretty easy to use. Have a look at a small section of the link I just referred to:

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
  }
}

至于你的问题中提到的其他项目：

As to the other item mentioned in your question:

我想上传文件和等待响应区别开来，这样我就可以显示相应的信息/指示器图标等，给用户。

I would like to distinguish between "uploading file" and "awaiting response", so I can show corresponding messages/indicator icons etc. to the user.

这是绝对有可能在理论上。我做的跨浏览器上传库我维护，精细上传，是等待，直到最后一个字节已发送（根据以我的进度处理程序），然后添加一个消息旁边UI中的文件，如处理...。我做了，因为最后一个字节已发送，服务器上的文件执行一些任务（S）的假设，我现在只是等待回应。

This is certainly possible in theory. What I do in the cross-browser upload library I maintain, Fine Uploader, is wait until the last byte has been sent (according to my progress handler) and then add a message next to the file in the UI, such as "processing...". I've made the assumption that, as the last byte has been sent, the server is performing some task(s) on the file and I am now simply awaiting a response.

我说，这是可能的，以检测在理论，但在实践中没有跨浏览器。为什么？我评论过这在精细上传Github上库的情况下。我有我的意见的全部在这里：

I said this is possible to detect in theory, but not in practice cross-browser. Why? I've commented on this in a case in the Fine Uploader Github repository. I'll include the entirety of my comment here:

我注意到，Firefox不会触发其最后的进步事件，直到它   从服务器接收，这是有点长号的响应。   还有就是火狐的问题提出来跟踪这个问题。

I noticed that Firefox doesn't fire its last progress event until it receives the response from the server, which is a bit of a bummer. There is a Firefox issue filed to track this "issue".

这听起来像火狐实际上可能下的信   XHR V2规范，而Chrome浏览器秉承了规范的精神。   Chrome的实施，导致在最后的进展情况   在最后一个字节被派开除是最可期待的，但   这可能只是违反了规范的。不知道IE10做什么还没有   因为我没有看过成呢。一个FF开发商开辟一个线程   在w3.org，要求一些澄清。

It sounds like Firefox might actually be following the letter of the XHR V2 spec, while Chrome is adhering to the "spirit" of the spec. Chrome's implementation, which results in the last progress event fired after the last byte has been "sent" is what most may expect, but this may just be a violation of the spec. Not sure what IE10 does yet as I haven't looked into that yet. A FF developer has opened a thread on w3.org, asking for some clarification.

铬开发认为，预期的行为其实是一个WebKit的   细节，而不是具体到Chrome浏览器。这表明，Safari和   Chrome浏览器出现相同的行为，我已经验证。听起来   有那么一推，调整规范，使WebKit的行为   可以预期的行为（根据规范的字母）。

A Chromium dev believes the "expected" behavior is actually a webkit detail, and not specific to Chrome. This suggests that Safari and Chrome exhibit the same behavior, which I have verified. It sounds like there is a push to adjust the spec to allow webkit's behavior to be the expected behavior (according to the letter of the spec).

请注意，我没有使用loadend事件，以确定何时   浏览器发送完最后一个字节。我只是比较   处理时，装值总值进步事件   通知。如果这两个值相等，我宣布文件   完全派。根据规范，我应该能够做到这一点   （我认为），因为loadend事件后，最后干脆解雇   进步的事件。请参阅有关 ProgressEvent 了解规范   详细信息。

Note that I am not using the "loadend" event to determine when the browser has finished sending the last byte. I'm simply comparing the "loaded" value with the "total" value when handling "progress" event notifications. If these two values are equal, I'm declaring the file "completely sent". According to the spec, I should be able to do this (I think) since the "loadend" event is simply fired after the last "progress" event. See the spec regarding the ProgressEvent for more details.

要总结，这个工作正常，在Chrome和Safari，而不是Firefox浏览器。我不记得，如果这个工程在IE10与否。我永远记得，因为我不使用IE浏览器了。在Firefox，一旦它击中近99％左右，直到收到响应的进展指示器将被卡住。

To summarize, this works fine in Chrome and Safari, but not FireFox. I can't recall if this works in IE10 or not. I can never remember since I don't use IE much. In Firefox, the progress indicator will be stuck once it hits near 99% or so until the response is received.

需要注意的是，因为我已经指出，如果用户代理支持文件API，所有这一切都进展的跟踪是唯一可能。这省去了IE9及以上。对于非文件API的浏览器，有几个选项：

Note that all of this progress tracking is only possible as I have stated if the user agent supports the File API. That leaves out IE9 and older. For non-file API browsers, there are a couple options:

1. 在建立某种形式的由客户端和服务器的理解，涉及公约的GET请求。客户端会周期性地发送GET请求给服务器，并且服务器将必须与该文件进步作出响应。仅供参考精细上传有预定功能要求寻找到这个多了，虽然我'中号不是真的疯了这个方法。
2. 另一种选择，这似乎有点更好，但也许更多的是有点限制（因为它取决于应用程序服务器上），是使nginx的使用上传进度模块（发音引擎-X的情况下，你不熟悉）。我已被告知，阿帕奇也有类似的模块，但我一直无法找到任何文件，这个（虽然我没有研究过这么多的话）。精细上传也有[此功能请求（ https://github.com/Widen/细上传/问题/ 506 ），我会在不久的将来调查也是如此。

1. Establish some sort of convention involving GET requests that is understood by the client and server. The client would periodically send GET requests to the server, and the server would have to respond with the file progress. FYI Fine Uploader has a scheduled feature request to look into this more, though I'm not really crazy about this approach.
2. Another option, which seems a bit nicer, but perhaps a bit more limiting (since it depends on the application server) is to make use of the UploadProgress module in nginx (pronounced Engine-X in case you are not familiar). I have been told that Apache has a similar module, but I have been unable to locate any documentation for this (though I haven't looked into this much at all). Fine Uploader also has [a feature request for this (https://github.com/Widen/fine-uploader/issues/506) that I will investigate in the near future as well.

希望这回答了你的问题。

Hope this answers your questions.

这篇关于确定是否AJAX请求已完成，同时等待响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！