php - Determine if AJAX request has completed while still waiting for response - Stack Overflow

admin管理员组

文章数量:1326278

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.

I'm using jQuery's $.ajax, where I can specify a plete()-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.

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

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

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.

I'm using jQuery's $.ajax, where I can specify a plete()-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.

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

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

• php
• javascript
• jquery
• ajax

Share Improve this question Follow asked May 24, 2013 at 16:40 lethal-guitarlethal-guitar 4,51911 gold badge2121 silver badges4141 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

See the Session Upload Progress feature.

When enabled, PHP will store upload progress informations in the user's session. You can then fetch this data by doing some ajax pulling.

Alternatively, APC has a similar feature.

The answer of arnaud576875 applies to the actual file upload (which you say may or may not take seconds). You may need both methods. In general, there is no mechanism in PHP for tracing the progress within a script - neither does PHP know what % it is at nor does it necessarily return any data to the caller until the end (even if it did, your JS would not receive the partial output).

The standard way to do this is to have the browser continually poll the server for the progress of the script. The upload is separate and so you would need to find this also and merge the two numbers - this would require an estimate of how long each task (uploading, processing) would take and some good Algebra skills.

In your script you would need to determine the percentage done (if you have a large foreach loop this is easy) and store it somewhere (database,file,APC). You would need also a way of identifying the user (user_id and/or pass a random number from javascript as an ID).

Your polling script (ex. every 2 seconds) would then get this number for the progress of the script by passing the unique ID(s).

As requested in your ment, here is a more plete explanation of my ment.

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 pute 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.

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.

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

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".

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, asking for some clarification.

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).

Note that I am not using the "loadend" event to determine when the browser has finished sending the last byte. I'm simply paring the "loaded" value with the "total" value when handling "progress" event notifications. If these two values are equal, I'm declaring the file "pletely 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.

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.

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. 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./Widen/fine-uploader/issues/506) that I will investigate in the near future as well.

Hope this answers your questions.

本文标签： phpDetermine if AJAX request has completed while still waiting for responseStack Overflow