10

I have an ajax request that takes a while to complete, but the server does output some content along the way. If I load the request simply in the browser, I can see the page slowly loading and it can be stopped at any time. Is it possible to access an incomplete ajax request before the server closes the response?

hughes
  • 5,595
  • 3
  • 39
  • 55
  • http://stackoverflow.com/questions/2164330/if-you-flush-the-content-ob-flush-of-an-ajax-request-the-content-will-get-load – Mick Hansen Jul 13 '11 at 17:15
  • I believe the `onreadystatechange` of the native XHR fires more often than only at the end. Not sure how to do it with jQuery, though. – pimvdb Jul 13 '11 at 17:15
  • No i don't believe jQuery would support that, would probably have to find another AJAX lib that supports progessional updates or write your own implementation. – Mick Hansen Jul 13 '11 at 17:17
  • possible duplicate of [How to load an ajax (jquery) request response progressively without waiting for it to finish?](http://stackoverflow.com/questions/2753982/how-to-load-an-ajax-jquery-request-response-progressively-without-waiting-for-i) – George Stocker Jul 14 '11 at 00:57
  • http://stackoverflow.com/questions/287286/jquery-is-req-readystate-3-possible – Kamyar Jul 25 '11 at 17:35

6 Answers6

6

The way to accomplish this is by listening on the readyState in the the xhr object. When readyState == 3 it means new content has arrived and you can access it. The technique is referred to as Comet.

Note however that different browsers behave differently here, IE will not allow you to access it See Here and webkit browsers (Chrome/Safari) buffer 2KB of data before making it available. After accounting for that though, you can then listen for the change then act on it.

Unfortunately, jQuery does not currently support this out of the box. You can get around this as noted in Bug #8327, where they basically fall back to polling on the readyState to see if it changes. They have plans to maybe do something about it in the future, Bug #9883, but don't hold your breath.

So finally, yes it is possible, no it is not easy.

Community
  • 1
  • 1
Andrew
  • 13,757
  • 13
  • 66
  • 84
  • Thanks, this answer explains a lot. – hughes Jul 25 '11 at 18:41
  • I think Comet really applies to an open-ended response that allows for bidirectional communication like a socket. Essentially allowing the server to push data as needed. OP here is really just talking about a single, very long response. Same techniques may apply, however. – jiggy Jul 25 '11 at 18:53
  • @jiggy You are correct, but what he wants to do requires the same techniques, mainly reading from a response that has not completed, and being aware of the term will help in his own googling. – Andrew Jul 25 '11 at 19:05
  • Ohno, @Andrew I accidentally awarded the bounty to the wrong person :( I upvoted a few of your answers to make up for it... sorry :( – hughes Jul 26 '11 at 19:08
2

There are some good answers already, but none of them are really 100% reliable or cross-browser. A safer approach would probably be to chunk your response into "pages". Each request can specify something equivalent to a LIMIT and OFFSET and you keep making requests until you get an empty response. That incurs some extra overhead on both the client and server, but it would be more robust.

jiggy
  • 3,828
  • 1
  • 25
  • 40
  • +1 Great idea, simple and guaranteed to work in all browsers. – jfriend00 Jul 26 '11 at 03:05
  • ohno! I thought I was awarding the bounty to Andrew. Well, it's yours now since I can't undo it. – hughes Jul 26 '11 at 19:06
  • Dang. My rep hit 1337 for a glorious moment and I felt like an SO master. Now that I see it was ill-gotten, I will pass it along. I have an open question that is attracting no interest, so I will put your 50 points as a bounty on that one. EDIT: Evidently I need to wait until the question is old enough. Will do it as soon as I can. – jiggy Jul 26 '11 at 20:15
1

Taken from: https://stackoverflow.com/questions/287286/jquery-is-req-readystate- 3-possible

Assign your ajax call to a variable and attach an event to its readystatechanged.

var xhr = $.ajax(...);

xhr._onreadystatechange = xhr.onreadystatechange;

xhr.onreadystatechange = function() {
    xhr._onreadystatechange();
    if (xhr.readyState == 3) alert('Interactive');
};
Community
  • 1
  • 1
Kamyar
  • 18,639
  • 9
  • 97
  • 171
0

I don't know for sure if this will work but it's worth a try:

$.ajax({
  statusCode: {
    206: function() { // 206 is partial content
      // do work
    }
  }
});
wanovak
  • 6,117
  • 25
  • 32
  • I'm not sure but as far as I'm concerned a server does not send a `206 Partial Content` code during the transfer and a `200 OK` when it's done. – pimvdb Jul 13 '11 at 17:17
  • That would hardly ever get called in any web servers I know of. Checking readystate of 3 is far more likely to be useful, as long as the server code is flushing the content periodically. – Jordan Jul 13 '11 at 17:17
  • Yeah, I've never seen a 206 response for an AJAX request either, but I wasn't positive since OP's case may be different than any I've encountered. That's why I thought it was worth a try. – wanovak Jul 13 '11 at 17:24
0

Can you use long polling (comet) instead of ajax? Then you can flush the output buffers and read the content as the request is being processed.

http://www.zeitoun.net/articles/comet_and_php/start

Senica Gonzalez
  • 7,996
  • 16
  • 66
  • 108
0

Comet is a nice workaround right now, but it will be replaced by WebSockets in the near future.

Of course, WebSockets aren't supported out-of-the-box with many common web browsers yet, but there are already a number of polyfills that mimic the functionality in dull-edged browsers, many of which rely on Comet (XHR long polling) under the hood to mimic the functionality.

Personally, I prefer the socket.io polyfill, but my experience with it is limited to use alongside node.js, which may or may not mesh well with what you're working with.

namuol
  • 9,816
  • 6
  • 41
  • 54