AJAX

Ajax is a method to interact with server .Using Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page. Data are usually retrieved using the XMLHttpRequest object.


jQuery.post()

This method loads data from the server using a HTTP POST response. Lets see step by step how we can use a POST request to obtain data from the server

Suppose , we have a file named ajax.php and we wish to interact the server using this file. To request the page, we use :-

$.post("ajax.php");

To send some data along with the request, we use :-

$.post("ajax.php",{value1: "firstValue", value2: "secondValue"});

To send form data along with the request, we use :-

$.post("ajax.php",$('#formId').serialize());

To handle the data obtained through request and show it as alert, we use :-

$.post("ajax.php",{value1: "firstValue", value2: "secondValue"},
      function(data){
	   alert("Data loaded: " + data);
	   });

Lets see a complete working demo obtained through the combination of all of the previous steps :-



Results obtained






Results obtained

In the above code, we obtained the value of the input through id.val() method. These values are passed to the ajax.php and the obtained result is shown on the div.Note that we have used stopImmediatePropagation() to avoid any other request on the same page to be made. You can remove that if you are using just a single AJAX handler. However, keeping it will be more safer.

jQuery.get()

The GET method of making the request is exactly similar to the previous one, except that $.post is replaced by $.get. Lets see the working ajax example using GET method.



Results obtained






Results obtained

In this method $.post has been replaced by $.get.

Member Login

Member Login




Not a Member? Sign Up!




Login to comment

Be the first to comment on this topic







  


<<< Wanna review