Simple Ajax Using jQuery

Ajax is a technique for handling data without reloading a page or without sending a postback. Often we want a loading indicator while Ajax request (xmlhttp request) is processing. A simple example is gmail email load indicator. Implementing this requirement using jQuery is quite easy. Interesting fact is that jQuery encapsulates ajax events which makes development task for programmer easy. We will use ajaxSend and ajaxComplete events of jQuery. ajaxSend attach a function that should be executed before an ajax request is sent. On the other hand ajaxComplete attach a function that should be executed when an ajax request completes.

Here are the steps:-

1. include the jquery.js file. Download it from http://jquery.com

2.bind an event to the div where loading image placed.Initially the div id "loading" is hidden. Code example is given below:-

$(document).ready(function()

{

    /*shows the loading div every time we have an Ajax call*/

    $("#loading").bind("ajaxSend", function(){

   $(this).show();

  }).bind("ajaxComplete", function(){

   $(this).hide();

  });

});

The above code means when an ajax request is sent the div id "loading" is shown and when request completes the div hide again.

3. Call a javascript function on an event such as button click. Suppose that the javascript function is callAjax.

4. jQuery has several variations of calling ajax. They are quite easy and friendly for programmers. They reduces headeche for various ajax states. Please check this link for ajax functions. I used here $.get. Examples is given below:-

$.get("test.php", { name:'john',age:20},callbackfunction);

5. Now parse the result if you put it in xml response and put where you want. If you return not xml but some html then you can put inside a div or other using innerHTML.