JQuery Ajax Calling Functions

Recently I was working on a Website with ASP.Net and jQuery. While working with the jQuery library I found that there are 5 different functions that can be used to make an Ajax call to a page and to fetch data. I will discuss those five functions one by one.

The following is a list of the five functions availale in the jQuery libaray to make Ajax calls.

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

Load

A method to make an Ajax call to the page and supports sending using eiher Get or 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 the above code you can easily make a call to any page by passing it an Url. The call back function provides more control and allows handling of any error by making use of the Status value.

One of the important things about the load method is that it allows loading a portion of a page rather than the whole page. So for retrieval of only part of the page, the call remains the same but the url is:

var loadUrl = "TestPage.htm #dvContainer";   

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



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

Important Feature

• Allows making a call with both Get and Post request
• Allows loading portions of pages.

getJson

A method allowing retrieval of json data by making an Ajax call to the page. This method only allows passing the parameter using the get method; posting a parameter is not allowed. One more thing is that this method provides the response using the Json format.

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

The above code makes use of the getJSON function and displays json data fetched from the page.

The following is json data returned by the Json.htm file.

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

The following image displays the json data returned as a response.

Important Feature

• Only sends data using the get method; post is not allowed.
• Returns the response data as Json only

get

Allows making an Ajax request with the get method. It handles the response in 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 the Name parameter to the page using the get request.

On the server side you can get the value of the Name parameter in a request object querycollection.

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

The firebug shows the parameter passed by me as a Get request and the value of the parameter is pranay.

Important Feature

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

post

Allows making an Ajax request with the post method. It handles the response in many formats including xml, html, text, script, json, and jonsp. It (post) does the same as get but just sends data using the 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 the Name parameter to the page using post request.

On the server side you can get the value of the Name parameter in the request object formcollection.

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

The firebug shows the parameter passed by me as a Get request and the value of the parameter is Hanika.

Important Feature

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

Ajax

Allows making the Ajax call. This method provides more control than all other methods we have seen. You can figure out the difference by checking the list of parameters.

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 the above code you can see all the parameters and the comment for each parameter describes the purpose of each one.

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

Important Feature

• Provides more control of the data sending and on response data.
• Allows handling of errors occuring during the call.
• Allows handling of the data if the call to the Ajax page is successful.

Summary

So each method of jQuery Ajax is different and can be used for a different purpose.