jQuery AJAX Tutorial, Example: Simplify Ajax development with jQuery

[ad name=”AD_INBETWEEN_POST”] jQuery, the JavaScript library provides some powerful set of jQuery AJAX API’s to handle AJAX requests. The normal way of making AJAX calls using JavaScript is a bit odd as you have to first create an XMLHttpRequest object that depends on the browser and then make an AJAX call. Also sending a form data using AJAX is also bit difficult if we use normal JavaScript approach of calling AJAX.

jQuery provides simple yet powerfull functions which have extended the JavaScript AJAX methods and provide more flexible way. Let us see different ways of doing AJAX things in jQuery.

GET Request method using jQuery

jquery-logo Load a remote page using HTTP GET request method. This is an easy way to send a simple GET request to a server. It allows a single callback function to be specified that will be executed when the request is complete (and only if the response has a successful response code).

jQuery.get( url, [data], [callback], [type] )

url: (String) The URL of the page to load.
data (Optional): (Map) Key/value pairs that will be sent to the server.
callback (Optional): (Function) A function to be executed whenever the data is loaded successfully.
type (Optional): (String) Type of data to be returned to callback function: “xml”, “html”, “script”, “json”, “jsonp”, or “text”.

	function(data) { alert(data); },

	function(data) { alert(data); },

POST Request method using jQuery

Sending post method is also very easy with jQuery. All you have to do is just to call jQuery.post () method instead of jQuery.get (). Following is the syntax of post method.

jQuery.post( url, [data], [callback], [type] )

url: (String) The URL of the page to load.
data (Optional): (Map) Key/value pairs that will be sent to the server.
callback (Optional): (Function) A function to be executed whenever the data is loaded successfully.
type (Optional): (String) Type of data to be returned to callback function: “xml”, “html”, “script”, “json”, “jsonp”, or “text”.

$.post("test.php", { func: "getNameAndTime" },
  }, "json");

Get JSON using jQuery

JavaScript Object Notation (JSON) is a popular light weight format that can be used to get data from server. JSON has became very popular since that web pages have became interactive using AJAX. JSON format is easy to create from the server and easy to parse at client as it is the basic object representation in JavaScript.

JQuery provides a function that can be used to make an AJAX call and get the data in JSON format. Normally the data that we get from AJAX is converted in JSON by calling eval () method of JavaScript. But the function provided by JQuery handles this internally and provides direct JSON object as output.

jQuery.getJSON( url, [data], [callback] )

          $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).appendTo("#images");
            if ( i == 3 ) return false;

AJAX Start/End using jQuery

While you make an AJAX call and get some data from server, it is good to show a progress bar or image to user so that (s)he knows that something is going on. Hence Loading… text is common in AJAX enabled application.

What if you web application is making many AJAX calls like gmail. You may want to display a Loading… text while any of AJAX call is proceeding. To achieve this ajaxStart() and ajaxComplete() methods of jQuery can be used.

ajaxStart() method registers a function handler that will be called by jQuery internally whenever an AJAX call is made. If already a request is active than the handler is not called. We can use this method to register a handler function that will display our progress bar.

$.ajaxStart(function() {

In above code snippet, we used ajaxStart() method to register a function that set the innerHTML of div to Loading…

Similarly ajaxComplete() method can be used to register a handler function which gets called by jQuery when an AJAX request get completed and any other active request are not in progress.

$.ajaxComplete(function() {

Serialize html form using jQuery

While submitting a form using AJAX, one has to create a input string that contains the value of all the input elements on the screen. It is very difficult to create this string if your form is very big. Hence we can use jQuery’s serialize() and serializeArray() method to do so.


Serializes a set of input elements into a string of data. Serialize is typically used to prepare user input data to be posted to a server. The serialized data is in a standard format that is compatible with almost all server side programming languages and frameworks. In order to work properly serialize requires that form fields have a name attribute. Having only an id will not work.

var str = $("form").serialize();

In above code snippet, we created a serialize output of the form. This value can be sent to server by an AJAX call.


serializeArray() does the similar job. Except it creates JSON output.

     {name: 'firstname', value: 'Hello'}, 
     {name: 'lastname', value: 'World'},
     {name: 'alias'}, // this one was empty

If you read this far, you should follow me on twitter here.

Get our Articles via Email. Enter your email address.

You may also like...


  1. Manish says:

    nice and useful. Good job !!!!!!!!

  2. farhaan says:

    in ajax call method we can use callback what of argument callback method has

  3. Anna Harris says:

    Ya I agree with you “farhaan” that in Ajax call method, we can use a callback method.

  4. wecode says:

    good work! found it very helpful. Thanks for sharing.

  5. Free classifieds says:

    Worked, Thanks for sharing

  6. Hunta says:

    The only person I have found in 5 hours crawling the net who thought to mention you have to use the name attribute when passing form data. Thank you, you saved the day.

  7. Hi Viral,

    Thanks for sharing..! Just want to understand a bit all these codes as shown in above examples need to call in the $( document ).ready() or we call it as it is without $( document ).ready() and can you please provide me complete source code on the same. i really lik the article especially the Get JSON using jQuery example. Keep posting ..Thanks

    • Pankaj says:
       $.getJSON( url , params , callback ) 

      Load JSON data using an HTTP GET request.
      url: ( String ): The URL of the page to load.
      params: ( Map ): (optional) Key/value pairs that will be sent to the server.
      callback: ( Function ): A function to be executed whenever the data is loaded.

       $.getJSON("test.js", function(json){ alert("JSON Data: " + json.users[3].name); });  


       $.getJSON("test.js", { name: "John", time: "2pm" }, function(json){ alert("JSON Data: " + json.users[3].name); } );  
  8. Amit Singh says:

    hi help me ,,

    i want to design such application that without page refresh if any new record inserting in data base 1 notification should be come loke fb , and after click on notification all values in that database releted to that notofication should be show …

    can anyone help ????

    thanks in advance !!!!!!!

  9. Raju says:

    Nice one.

  10. Satya says:

    I need a code for pagination using ajax .I have apply it to already existing code where it is not done using pagination

  11. Mohamed Haniffa Ahamed says:


  12. Harish says:

    Am currently using Struts2 & Hibernate for a web project.Which toolkit is good for Ajax implementation?(Need for auto-populating values from Database).If so ? any links to similar implementation?

  13. BookNabber says:

    very simple example to learn call back.

Leave a Reply

Your email address will not be published. Required fields are marked *