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])
Option Parameter:
Here i have listed few parameters which is using frequently.
| Options | Description |
| accepts | The content type sent in the request header that tells the server what kind of response it will accept in return. |
| async | By default, all requests are sent asynchronously. Set it false to make it synchronous. |
| beforeSend | A callback function to be executed before Ajax request is sent. |
| cache | A boolean indicating browser cache. Default is true. |
| complete | A callback function to be executed when request finishes. |
| contentType | A string containing a type of content when sending MIME content to the server. |
| data | A data to be sent to the server. It can be JSON object, string or array. |
| dataType | Type of data that we receiving back from the server. |
| error | A callback function to be executed when the request fails. |
| headers | An object of additional header key/value pairs to send along with request. |
| isLocal | Allow the current environment to be recognized as local. |
| statusCode | A JSON object containing numeric HTTP codes and functions to be called when the response has the corresponding code. |
| success | A callback function to be executed when Ajax request succeeds. |
| timeout | A number value in milliseconds for the request timeout. |
| type | A type of http request for operation e.g. POST, PUT and GET. Default is GET. |
| url | A string containing the URL to which the request is sent. |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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
|
1 2 3 4 5 6 7 8 9 10 |
$.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.
