User Id :    Password :      New Member   Forgot Password
 
Jquery Ajax Calling functions
Description Jquery Ajax Calling functions   No. of Views     2474
  Rating     4
Author Pranay Rana   Posted On     21 Aug 2011
Tags JQuery and ASP.Net    

Sample Code   Download Code

 Introduction

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.

1.Load
2.getJson
3.GET
4.POST
5.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.

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.





 

About Author

About Author Hey, I am Pranay Rana, working as a Senior Software engineer. Web development in Asp.Net with C# and MS sql server are the experience tools that I have had for the past 5 years now.
For me def. of programming is : Programming is something that you do once and that get used by multiple for many years
You can visit me on my blog - http://pranayamr.blogspot.com/
Pranay Rana
No Photo
 
Country India
Company GMind Solutions
Home Page http://pranayamr.blogspot.com/

Rate this article

Rating options from poor, fair, good, very good to excelent.  
 

Comments

     
Write your comment here.  
Comment
Verification Code   
  
    
 
Section sponsored by