Web API With AJAX: Various Parameters of jQuery Ajax() Function

This is the "Web API with AJAX" article series. Here we are explaining various concepts of the ajax() function of jQuery by combining it with the Web API . We have explained various concepts of RESTful services and the ajax() function to consume them. You can visit all those articles by clicking on the following links:

In this article we will learn various parameters of a success callback function in the ajax() function of jQuery. We know that the jQuery ajax() function supports many callback functions and among them "success" and "error" are very popular. So, let's start to understand with examples.
First of all we will create this "person" controller where we have defined one POST action named "PostAction" that is returning one string . And in all examples we will use the same controller.

public class personController : ApiController

{

[HttpPost]

public String PostAction()

{

return "This is post";

}

}

Get return data from controller

From the "PostAction" action of the person controller we are returning string data (that will be returned as JSON) and we need to get it in the ajax() function. Here is the implementation of the ajax() function.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="APICall.aspx.cs" Inherits="WebApplication1.APICall" %>

$(document).ready(function () {

$("#Save").click(function () {

$.ajax({

url: 'http://localhost:3413/api/person',

type: 'POST',

dataType: 'json',

success: function (data, status, textStatus) {

console.log("Value of data:- " + data);

error: function (xhr, textStatus, errorThrown) {

console.log('Error in Operation');

}

});

</script>

</head>

<body>

</body>

</html>

We are receiving return data using a "data" parameter. Here is the output with the content of the "data" parameter.

return data from controller

Status parameter to check status

The status parameter helps to check the status of the ajax() request and response. In this example we are printing the value of the status parameter.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="APICall.aspx.cs" Inherits="WebApplication1.APICall" %>

$(document).ready(function () {

$("#Save").click(function () {

$.ajax({

url: 'http://localhost:3413/api/person',

type: 'POST',

dataType: 'json',

success: function (data, status, textStatus) {

console.log("Value of status:- " + status);

error: function (xhr, textStatus, errorThrown) {

console.log('Error in Operation');

}

});

</script>

</head>

<body>

</body>

</html>

It's showing "success"; that means the AJAX operation has been done successfully.

Textstatus to get Entire status of response

In the previous example we saw that the status parameter only contains the status of the AJAX operation. If we want to gather more information then we need to use the textStatus parameter.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="APICall.aspx.cs" Inherits="WebApplication1.APICall" %>

$(document).ready(function () {

$("#Save").click(function () {

$.ajax({

url: 'http://localhost:3413/api/person',

type: 'POST',

dataType: 'json',

//data:{"":"Sourav","":"Kayal"},

success: function (data, status, textStatus) {

console.log("Value of testStatus:- " + JSON.stringify(textStatus));

error: function (xhr, textStatus, errorThrown) {

console.log('Error in Operation');

}

});

</script>

</head>

<body>

</body>

</html>

Here is the full response information of the AJAX operation.

Textstatus to get Whole status of response
We are seeing that the ready state is "4"; that means the server is fully ready to serve the request. The status is 200, which means OK and is a success response.

Xhr to get entire demographics of AJAX call

We can use the "xhr" parameter to get the entire demographics of the AJAX operation. In this example we are printing the value of the "xhr" variable.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="APICall.aspx.cs" Inherits="WebApplication1.APICall" %>

$(document).ready(function () {

$("#Save").click(function () {

$.ajax({

url: 'http://localhost:3413/api/person',

type: 'POST',

dataType: 'json',

success: function (data, textStatus, xhr) {

console.log(xhr);

error: function (xhr, textStatus, errorThrown) {

console.log('Error in Operation');

}

});

</script>

</head>

<body>

</body>

</html>

Here is the output of the example above.

xhr parameter

Conclusion

In this article we have learned three important parameters of the success callback function of the jQuery ajax() function. I hope you have the basic idea of them. Happy programming.