Posting data dynamically without refreshing the page

Question

I just want to know how can I post data without refreshing the page for example, now Facebook when you post a comment it will be posted and shown to the people without refreshing the page. I do know how to insert data in MySQL without refreshing the page with AJAX but the question is: how to insert the data and get it at the same time without refreshing the page.

Thank You

Answer 1

OSDM's answer might seem accomplish the behavior you want but it isn't the one you're asking about. His answer would only provide updates when a user upload's something and not as they are created in the system (uploaded).

There are 2 different ways you can accomplish the fetching of new information in the server: AJAX and WebSockets.

AJAX - AJAX stands for Asynchronous Javascript and XML. It allows you to fetch content with a particular server behind the scene and then you can insert the newly fetched data into your page to display it to the user. This however has to be manually triggered and therefore doesn't really happen in real time . You could trigger the fetching of data either manually (eg with the press of a button), or on a timer (eg every 5 seconds, 10 minutes, etc). It is important to note that it is hard for the server to know what information the page is currently displaying and therefore each AJAX call usually request all of the information to be displayed and re-render the page (deletes the current content and inserts the newly fetched one which also includes content that was already being displayed).

WebSockets - WebSockets can be thought of as an 'upgraded' HTTP connection. The client and the server establish a connection and are free to send data in either direction. You can set up web sockets between your server and the website (client) such that whenever new content is inserted into the MySQL database the server relays the new content to the client. Much like AJAX, you would interpret the new information and add it to the page. The upside of using web sockets is that information is being fed to you in-real time as the server receives it. This means that you only need to fetch data in bulk when you first load the site and updates are pushed to you as they occur. You do not need to rely on a timer or manual input to fetch data as you're being fed data and not fetching it.

Facebook, for example, doesn't rely on a timer or you fetching new data (although that certainly happens if you refresh the page) but each client is listening to the server for new information through web sockets.

Answer 2

That is all javascript (or jquery). You allready know how to send the data to your server. Now all you need to do is modify the html with javascript. For example(jquery):

$("#submit").click(function(){
$("#comments").append("<div class=newcomment>"+$("#textbox").val()+"</div>");
$.POST('upload.php',{comments:$("#textbox").val()});
});

Now the comment is send to the upload.php and the comment is added to the comment section of your page. If you need data from the server also to be included, just add some javascript to upload.php file and do something like this: $("#getdatefromserver").load('upload.php',{comments:$("#textbox").val()}); Now the javascript from upload.php will run in the page.

And no page refresh is done.