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.

Load
getJson
GET
POST
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";

Code

$(document).ready(function () {

Code

$("#load_basic").click(function () {

Code

$("#result").html(ajax_load).load(loadUrl, function (response, status, xhr) {

Code

if (status == "error") {

Code

var msg = "Sorry but there was an error: ";

Code

$("#dvError").html(msg + xhr.status + " " + xhr.statusText);

Code

);

Code

return false;

Code

});

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";

Code

$("#btnJson").click(function () {

Code

$("#dvJson").html(ajax_load);

Code

$.getJSON(jsonUrl, function (json) {

Code

var result = json.name;

Code

$("#dvJson").html(result);

Code

);

Code

return false;

Code

});

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.

Code

"name": "Hemang Vyas",

Code

"age" : "32",

Code

"sex": "Male"

Code

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";

Code

$("#btnGet").click(function () {

Code

$("#dvGet").html(ajax_load);

Code

$.get(getUrl, { Name: "Pranay" }, function (result) {

Code

$("#dvGet").html(result);

Code

);

Code

return false;

Code

});

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)

Code

txtName.Text = Request.QueryString["Name"].ToString();

Code

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";

Code

$("#btnPost").click(function () {

Code

$("#dvPost").html(ajax_load);

Code

$.post(postUrl, { Name: "Hanika" }, function (result) {

Code

$("#dvPost").html(result);

Code

);

Code

return false;

Code

});

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.

Code

if (Request.Form["Name"] != null)

Code

    txtName.Text = Request.Form["Name"].ToString();

Code

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";

Code

$("#btnAjax").click(function () {

Code

$("#dvAjax").html(ajax_load);

Code

$.ajax({

Code

type: "GET", //GET or POST or PUT or DELETE verb

Code

url: ajaxUrl, // Location of the service

Code

data: "", //Data sent to server

Code

contentType: "", // content type sent to server

Code

dataType: "json", //Expected data format from server

Code

processdata: true, //True or False

Code

success: function (json) {//On Successfull service call

Code

var result = json.name;

Code

$("#dvAjax").html(result);

Code

},

Code

error: ServiceFailed// When Service call fails

Code

});

Code

return false;

Code

});

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.

7 Comments

Join the conversation! Your thoughts help the community grow.

Manas Mohapatra11y ago
Nice one..
Angelina Erin15y ago
Helpful Article
- Mohammadreza Shaekri15y agoedited
  very excellent your article
Blocked Account15y ago
Pranay nice article. Keep it up.
- Pranay Rana15y ago
  thanks you can visit my blog for more stuff http://pranayamr.blogspot.com
Dinesh Beniwal15y ago
Very useful article pranay..
- Pranay Rana15y ago
  thanks you can visit my blog for more stuff