Avoiding content reload without use of frames/iframes

Th开发者_如何学JAVAere are plenty of reasons to want to avoid <iframe>s (and indeed frames in general) but what are the best alternatives? (The intent here being to avoid full page reloads).

Facebook, for instance, seems to keep its top bar and side menu in tact (for the most part) and a full page reload incredibly rare.

Searching for explanations with little idea of what to use as search terms has rendered me little insight, so I thought it best to raise the question here. Is this all Ajax, or is there more to it than that?

AJAX

The more traditional approach is "AJAX". In a nutshell, your javascript code can request specific content from the server on a time (every x seconds) or when a user event happens (e.g. a button click).

A very basic implementation in jQuery would look something like:

function updateShouts(){ // Assuming we have #shoutbox $('#shoutbox').load('latestShouts.php'); } setInterval( "updateShouts()", 10000 );

This will update a div with id "shoutbox" every 10 seconds with whatever content is retrieved from latestShouts.php.

More advanced implementation would involve retrieving only data (not presentation) in a format like JSON or XML, and then updating the existing HTML values with the data that was received.

WebSockets

More recently, browsers have started supporting something called WebSockets. WebSockets allow you to keep a bidirectional connection open between the browser and the server, and it allows the server to push information to the browser without the browser requesting it.

This is more efficient in many ways; with the main reason being the fact that you don't have to waste server calls every x seconds to check if data is there. WebSockets allow you to display information from the server almost as soon as it becomes available.

I hope that helps..

Cheers!

Injecting partial content using ajax is your best and easiest bet - I recommend jquery too.