How can I have live info on a page without refreshing?

Facebook has introduced a ticker which shows live news scrolling down. How can I have this same开发者_运维技巧 time of functionality on my site? I don't care to use an iframe and have it refresh because it will A flicker and B make the page loading icon come up (depending on browser). How can this be done?

---

For this you'd want to fetch the data you're looking for with AJAX every X seconds.. Also known as polling.

Here's the break down: Every X seconds, we want to query our database for new data. So we send an asychronous POST to a php page, which then returns a data set of the results. We also declare a callback function (native to jQuery) that will be passed the data echo'd from our PHP.

Your PHP:

if (isset($_POST['action'])){
    if ($_POST['action'] == 'pollNewData'){
        pollNewData();
    }
}

function pollNewData(){
    $term = $_POST['term'];
    $sql = "select * from TABLE where TERM = '$term'";
    $result = get_rows($sql);
    echo json_encode(array('status'=>200, 'results'=>$results));
}

Your front end javascript:

setTimeout(pollForNewData, 10000);

function pollForNewData(){
    $.post('url/ajax.php',{
        action: 'pollNewData',
        term: 'your_term'
    }, function(response){
        if (response.status == 200){
            $.each(response.results, function(index, value){
               $("#container").append(value.nodeName);
            });
        }
    }, 'json');
}

What essentially is going on here is that you will be posting asynchronously with jQuery's ajax method. The way you trigger a function in your PHP would be by referencing a key-value item in your post depicting which function you want to call in your ajax request. I called this item "Acton", and it's value is the name of the function that will be called for this specific event.

You then return your data fetched by your back end by echo'ing a json_encoded data set.

In the javascript, you are posting to this php function every 10 seconds. The callback after the post is completed is the function(response) part, with the echo'd data passed as response. You can then treat this response as a json object (since after the function we declared the return type to be json.

---

Pretty much the only way you can do it is with some sort of Asyncronous javascript function. The easiest way to do it is to have javascript priodically poll another http resource with that information and replace the current content in the dom with the new content. Jquery and other javascript frameworks provide AJAX wrappers to make this process reasonably simple. You aren't limited to using XML in the request.

It's a good idea to make sure that even without javascript enabled that some content is available. Just use the javascript to 'update it' without having to refresh the page.

---

You can do this kind of ticker using Ajax... using AJAX you can poll a URL that returns JSON/XML containing the new updates and once you get the data, you can update the DOM. you can refer this page for introduction to Ajax.

---

Ajax is the best method but that's what everyone else already mentioned. I wanted to add that although I agree ajax is the best method, there are other means too, such as Flash.

---

There are two approaches possible for obtaining updates like this. The first is called push and the second is called pull.

With push updates, you rely on the server to tell the client when new information is available. In your example, a push update would come in the form of Facebook telling your site that something new happened. In general, push schemes will tend to be more bandwidth friendly because you only transmit information when something needs to be said (Facebook doesn't contact your site if nothing is going on). Unfortunately, push updating requires the server to be specially configured to support it. In other words, unless the service you are asking for updates from (ex. Facebook) has a push update service available to you, you cannot implement one yourself. That's where pull techniques come in.

With pull updating, the client requests new information from the server when it deems necessary. It is typically implemented using polling such that the client will regularly and periodically query the server to see what the latest information is. Depending on how the service is oriented, you may have to do client-side parsing to determine if what you receive as a response is actually new. The downside here is of course that you likely will consume unnecessary amounts of bandwidth for your polling requests where no useful information is obtained. Similarly, you may not be as up-to-date with new information as you would like to be, depending on your polling interval.

In the end, since your site is web-based and is interfacing with Facebook, you will likely want to use some sort of AJAX system.

There are a few hybrid-ish approaches, such as long polling via Comet, which are outlined rather well on Wikipedia:

Push technology: http://en.wikipedia.org/wiki/Push_technology

Pull technology: http://en.wikipedia.org/wiki/Pull_technology