Welcome to the Understand jQuery Ajax function article series. In this article we are explaining jQuery Ajax functions in the ASP.NET environment. In previous articles we saw how to call various web and service methods using a jQuery Ajax function. You can get them here.
In this article we will understand various callback functions of jQuery Ajax methods. If "callback" is jargon new to you then I will suggest you go through some good articles to understand the concept of callback functions. However I will provide a rough overview to provide you an idea of callback functions.
What a callback function is
Let's take one real scenario. My friends and I are arranging a party on a lazy day. We want to buy some Pizza and drinks (of course cold, Ha..Ha..). Two friends have gone to bring them all. Now, the situation is that a few friends like vegetariam pizza, another likes Paneer and others do not. A few likes Chicken and so on and so on. And the beauty of the shop is that no one knows whether all varieties will be available. So, we have decided that "They will call after reaching the shop". Since they are calling back after meeting a certain criteria, it's called a callback function. Hmm; that's a lengthy example of a callback function.
So, the concept is that when certain criteria is met the callback function is fired. In Ajax functions many callback functions exist. For example, when the request is raised, one function will raise one event when the request is successfully finished, again another function will be fired.
Success function
This is the most important and heavily used functions of jQuery Ajax functions. The success function will be fired when the Ajax request is successfully performed. In the following example we will call one WebMethid from the jQuery Ajax function. Try to understand the following code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="WebApplication.JavaScript" %>
<head id="Head1" runat="server">
<script src="jquery-1.7.1.min.js"></script>
<script>
//Jquery.parseJSON function in JQuery
$(document).ready(function () {
$("#Submit").click(function () {
$.ajax({
type: "POST",
url: "JavaScript.aspx/TestAjax",
contentType: "application/json; charset=utf-8",
success: function (response) {
alert("AJAX call Successfully");
},
});
});
});
</script>
</head>
<body>
<form id="From1" method="post">
<input type="button" value="submit" name="Submit" id="Submit" />
</form>
</body>
</html>
Here is sample output. It's showing that the Ajax function was executed successfully.
![Ajax Call Successful]()
Error function
This function executes when there is something wrong in an Ajax operation. Here is a sample example.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="WebApplication.JavaScript" %>
<head id="Head1" runat="server">
<script src="jquery-1.7.1.min.js"></script>
<script>
//Jquery.parseJSON function in JQuery
$(document).ready(function () {
$("#Submit").click(function () {
$.ajax({
type: "POST",
url: "JavaScript.aspx/TestAjax",
contentType: "application/json; charset=utf-8",
data: '{}',
error: function (response) {
alert("Error occur in operation");
}
});
});
});
</script>
</head>
<body>
<form id="From1" method="post">
<input type="button" value="submit" name="Submit" id="Submit" />
</form>
</body>
</html>
This is our WebMethod.
public partial class JavaScript : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public void TestAjax()
{
throw new Exception("Error");
}
}
We are throwing our own exception within WebMethod. When the exception is raised for the error, which callback function will be immediately invoked? Here is a sample example.
![Call Back Function Error]()
Done callback
The "done" callback function executes when the Ajax operation completes. Sometimes its necessary to detect when the Ajax operation has finished. In this scenario we can use the "done" function.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="WebApplication.JavaScript" %>
<head id="Head1" runat="server">
<script src="jquery-1.7.1.min.js"></script>
<script>
//Jquery.parseJSON function in JQuery
$(document).ready(function () {
$("#Submit").click(function () {
$.ajax({
type: "POST",
url: "JavaScript.aspx/TestAjax",
contentType: "application/json; charset=utf-8",
data: '{}',
success: function (response) {
alert("success");
}
}).done(function (done) {
alert("Ajax Done successfully");
});
});
});
</script>
</head>
<body>
<form id="From1" method="post">
<input type="button" value="submit" name="Submit" id="Submit" />
</form>
</body>
</html>
Conclusion
In this article we have explained various callback functions of the jQuery Ajax method. Hope you have understood and enjoy them. In a future up article we will learn more about jQuery Ajax functions.