javascript - jQuery Ajax display data as it comes in - Stack Overflow

admin管理员组

文章数量:1315225

Let's say I have a page that returns a bunch of data slowly over time. Like, this for example:

<?php

$iTime = time();

while(time()-$iTime < 10 ) {
    echo "Hello world";
    echo str_repeat( ' ', 1024 ) . "<br />";
    flush( );
    sleep(3);
}

?>

I want to show all the data as it es in. So it'll update "live". As in, once a line of data is sent, it'll allow me to parse the data and display it?

Is there a way to do this via jquery? I apologize if this has been asked previously

Thanks for your time! :)

Let's say I have a page that returns a bunch of data slowly over time. Like, this for example:

<?php

$iTime = time();

while(time()-$iTime < 10 ) {
    echo "Hello world";
    echo str_repeat( ' ', 1024 ) . "<br />";
    flush( );
    sleep(3);
}

?>

I want to show all the data as it es in. So it'll update "live". As in, once a line of data is sent, it'll allow me to parse the data and display it?

Is there a way to do this via jquery? I apologize if this has been asked previously

Thanks for your time! :)

• javascript
• ajax

Share Improve this question Follow asked May 23, 2011 at 5:17 dabdab 82711 gold badge1212 silver badges2323 bronze badges 2

• I don't think you want to use sleep() on the server-side, that'll just slow down the response. What about using a setTimeout() 'loop' on the client-side to request the data in pieces via AJAX? Or (my preference) return all of the data at once but store it in a JavaScript array and then use setTimeout() to gradually display each element in the array? – nnnnnn Commented May 23, 2011 at 5:30
• 1 This was just an example script to make it take a long time. My actual script doesn't use sleep. :) – dab Commented May 23, 2011 at 5:31

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Of course, building a basic et-style long poll is pretty trivial:

PHP:

<?php
    $data = null;
    while ($data ==  null)
    {
         $data = find_data($_REQUEST['last_update']); // This is up to you.
                    // Although you may do a DB query, that sort of breaks the model
                    // from a scalability perspective.  The point in this kind of
                    // operation is to rely on external data to know that it needs to 
                    // update users, so although you can keep your data in a DB, you'll
                    // want a secondary storage mechanism to keep from polling it.
                    //
                    // Conceptually, you'd put new information into this data storage
                    // system when something changes (like new data from an external
                    // source.  The data storage system could check to see if a file
                    // has been updated or if there is new data in something like a
                    // memcached key.  You'd then consume the data or otherwise 
                    // mark it as used.
         sleep(5);
    }
    echo json_encode($data);

JavaScript:

 function setListener()
 {
      $.ajax({
           url: 'updater.php',
       dataType: 'json',
       success: function(data, status, xhr) 
           {
              // do something, such as write out the data somewhere.
              setListener();
           },
       error: function()
           {
               setTimeout(setListener,10000);
           }
       });
 }

take a look at the ajax-http-stream jquery plugin. It extends jquery ajax calls to accept et style data being streamed from the backend and will call a function OnDataRecieved when new data es in.

Well, you're hitting the limitations of the HTTP protocol itself, so this is less jQuery and more about web programming. If you truly need real-time push, then a different protocol is more suited, like XMPP (which several big players use, like Google Wave).

However, with jQuery I'd use normal polling on low-latency, low-power resources to do the job (easy to create static resources that use HTTP caching properly, relying on REST to guide you), so something akin to ;

1. setTimeout ( 'myPoll("http://my_feed")', 500 ) ;
2. my_feed using HTTP caching as a static means (maybe on a per user basis, if necessary)

本文标签： javascriptjQuery Ajax display data as it comes inStack Overflow