The different way of handle AJAX in JQuery

Introduction

Recently I am working on Website with the asp.net and JQuery. While working with JQuery library I found that there are 5 different function that used to make AJAX call to page and to fetch data. I am going to discuss about that five function one by one.

Following is list of that five function availale in jquery libaray to make ajax call.

   1. Load
   2. getJson
   3. GET
   4. POST
   5. Ajax

1.LOAD

Method allow to make ajax call to the page and allows to send using both Get and Post methods.

var loadUrl = "TestPage.htm";
$(document).ready(function () {
   $("#load_basic").click(function () {
     $("#result").html(ajax_load).load(loadUrl, function (response, status, xhr) {
                    if (status == "error") {
                        var msg = "Sorry but there was an error: ";
                        $("#dvError").html(msg + xhr.status + " " + xhr.statusText);
                    }
                }
                );
                return false;
});

As you can see in above code you can easily make call to any page by passing it Url. The call back function provide more control and allows to handle the error if any by making use of the Status value.
One of the important thing about the load method is its allow to load part of page rather than whole page. So get only part of the page call remains same but the url is

var loadUrl = "TestPage.htm #dvContainer";

So by the passing above url to load method it just load content of the div having id=dvContainer. Check the demo code for detail.

Firebug shows the repose get return by when we call the page by Load method.

Important Features

• Allow make call with both Get and Post request
• Allow to load part of the page.

2.getJson

Method allow get json data by making ajax call to page. This method allows only to pass the parameter by get method posting parameter is not allowed. One more thing this method treat the respose as Json.

var jsonUrl = "Json.htm";
            $("#btnJson").click(function () {
                $("#dvJson").html(ajax_load);
 
                $.getJSON(jsonUrl, function (json) {
                    var result = json.name;
                    $("#dvJson").html(result);
                }
                );
                return false;
            });

Above code make use of getJSON function and displays json data fetch from the page.
Following is json data return by the Json.htm file.

{
"name": "Hemang Vyas",
"age" : "32",
"sex": "Male"
}

Following image displays the json Data return as respose.

Important Features

• Only send data using get method, post is not allowed.
• Treat the response data as Json only

3.GET

Allow to make ajax request with the get method. It handles the response of many formats including xml, html, text, script, json, and jonsp.

var getUrl = "GETAndPostRequest.aspx";
            $("#btnGet").click(function () {
                $("#dvGet").html(ajax_load);
 
                $.get(getUrl, { Name: "Pranay" }, function (result) {
                    $("#dvGet").html(result);
                }
                );
                return false;
            });

As in code I am passing Name parameter to the page using get request.
On server side you can get the value of the Name parameter in request object querycollection.

if (Request.QueryString["Name"]!=null)
{
    txtName.Text = Request.QueryString["Name"].ToString();
} 

The firebug shows the parameter passe by me as Get request  and  value of the parameter is pranay

Important Features

• Can handle any type of the response data.
• Send data using get method only.

4.POST

Allow to make ajax request with the post method. It handles the response of many formats including xml, html, text, script, json, and jonsp. post does same as get but just send data using post method.

var postUrl = "GETAndPostRequest.aspx";
            $("#btnPost").click(function () {
                $("#dvPost").html(ajax_load);
 
                $.post(postUrl, { Name: "Hanika" }, function (result) {
                    $("#dvPost").html(result);
                }
                );
                return false;
            });

As in code I am passing Name parameter to the page using post request.
On server side you can get the value of the Name parameter in request object formcollection.

if (Request.Form["Name"] != null)
{
    txtName.Text = Request.Form["Name"].ToString();
}

The firebug shows the parameter passe by me as Get request  and  value of the parameter is Hanika

Important Features

• Can handle any type of the response data.
• Send data using post method only.

5.AJAX

Allow to make the ajax call. This method provide more control than all other methods we seen. you can figure out the difference by checking the list of parameter.

var ajaxUrl = "Json.htm";
            $("#btnAjax").click(function () {
                $("#dvAjax").html(ajax_load);
 
 
                $.ajax({
                    type: "GET", //GET or POST or PUT or DELETE verb
                    url: ajaxUrl, // Location of the service
                    data: "", //Data sent to server
                    contentType: "", // content type sent to server
                    dataType: "json", //Expected data format from server
                    processdata: true, //True or False
                    success: function (json) {//On Successfull service call
                        var result = json.name;
                        $("#dvAjax").html(result);
                    },
                    error: ServiceFailed// When Service call fails
                });
 
 
                return false;
            });

In above code you can see the all the parameter and comment related to each parameter describe the purpose of each one.

Fire bug shows the called page return json data and Ajax function treat the respose as Json because in code datatype = json

Important Features

• Provide more control on the data sending and on response data.
• Allow to handle error occur during call.
• Allow to handle data if the call to ajax page is successfull.

Summary

So each method of jQuery ajax is different and can use for the difference purpose.