Download Code
Recently I am working on Website with the asp.net and jQuery. While working with jquery library I found that there are 5 diffrent 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.
- Load
- getJson
- GET
- POST
- Ajax
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 Feature
- Allow make call with both Get and Post request
- Allow to load part of the page.
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 Feature
- Only send data using get method, post is not allowed.
- Treat the response data as Json only
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 Feature
- Can handle any type of the response data.
- Send data using get method only.
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 Feature
- Can handle any type of the response data.
- Send data using post method only.
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 Feature
- 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.
