What is JQuery Ajax?

AJAX is standing for Asynchronous JavaScript and XML. It helps us to fetch the information from the server without reloading the page (ie., without refresh). JQuery is a great tool which provides a rich set of AJAX methods to develop great web application. jQuery provides the $.ajax method and several methods to make it easier to work with XHRs across browsers.

$.ajax

We can use the jQuery $.ajax() method in a different ways, let we discuss one by one.

• we can pass it a configuration object as its argument
• we can pass it a URL and an optional configuration object

SYNTAX: 

• $.ajax(url,[options])
• $.ajax([options])

1) we can pass it a configuration object as its argument:

The $.ajax() method offers the ability to specify both success and failure callbacks. It have a felxibility
to take a configuration object, which can be defined separately. This approach make the developer to write reusable code.

var updateSuccessfully = function( obj ) {
$( '#divSuccess').html( "Updated successfully" );
};

var showError = function( req, status, err ) {
console.log( 'Went wrong while performing operation', status, err );
};

var ajaxUpdateRequest = {
url: '/dotnethelpers/UpdateUsers',
dataType: 'json',
success: updateSuccessfully,
error: showError
};

// Initiate the request
$.ajax(ajaxUpdateRequest);

Code Explanation:

updateSuccessfully,showError -: Both are methods created for handling success & error.
ajaxUpdateRequest :  It is declared as a separate method for handling the ajax operation. Inside the code, if it return success then ajax success will call the updateSuccessfully method and showError method when ajax operation fails. This approach make the developer to write reusable code.

2) we can pass it a URL and an optional configuration object

In this type, we can also call the $.ajax() method by passing it a URL and an optional configuration object.
This is very useful if we want to use the default configuration for $.ajax(), or if you want to use the same configuration for several URLs

$.ajax( '/dotnethelpers/UpdateUsers', {
type: 'GET',
dataType: 'json',
success: function( resp ) {
console.log( "Operation Performed Successfully" );
},
error: function( req, status, err ) {
console.log( 'Went wrong while performing operation',, status, err );
}
});

Code Explanation:

In above code, we can take advantage of passing url, type, datatype etc as an parameter. so it can be used by several other method for performing operation with different arguments.