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.
- Understand jQuery Ajax function: call code-behind function
- Understand jQuery Ajax function : Call code-behind C# method
- Understand jQuery Ajax function : Call Web Service using JQury Ajax function
- Understand jQuey Ajax Function: Call Web-API Method
- Understand jQuery Ajax Function: Pass JSON Data to Service Method
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.
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({
Join the conversation! Your thoughts help the community grow.