jQuery Ajax display data as it comes in

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 comes 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 y开发者_Go百科our time! :)

Of course, building a basic comet-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 comet style data being streamed from the backend and will call a function OnDataRecieved when new data comes 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)