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.

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

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

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

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

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

{

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

}

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;
});