jQuery ajax() method is used to make asynchronous HTTP requests. In this tutorial, we will see how to make AJAX calls using jquery ajax() method.
Why do we use AJAX?
Ajax is used to make asynchronous HTTP calls, which means, user browser will not wait until all data is arrived to render the web page. Ajax can load or refresh part of the web page without re-loading the complete web page.
In jQuery, we use the ajax() method to make such asynchronous calls.
Syntax
$.ajax({parameterName:value, parameterName:value, ... });You can see, we can pass parameters inside braces to set preference for ajax call.
Parameters
In this section, we will see all available jquery ajax parameters and their usage.
| Option | Description | Value Type |
|---|---|---|
| accepts | The content type sent in the request header tells the server what kind of response it will accept in return. | string |
| async | It tells requests should be asynchronous or synchronous, by default all requests are asynchronous. | boolean |
| beforeSend | This parameter is used set some tasks which should be executed before making AJAX call. | function |
| cache | Specifies whether browser should cache or not this request | boolean |
| complete | A callback function to be executed when request finishes. | function |
| contentType | Specifies a content types that are being sent to server | string |
| crossDomain | specifies a boolean value indicating whether a request is a cross-domain. | boolean |
| data | request body, It can be JSON, string or array. | string,json,array |
| dataType | The type of data that you’re expecting back from the server. | string |
| error | A callback function to be executed when there is an error while executing a request | function |
| global | A Boolean indicating whether to trigger a global Ajax request handler or not. Default is true. | boolean |
| headers | An object of additional header key/value pairs to send along with request. | json,object |
| ifModified | Allow the request to be successful only if the response has changed since the last request. This is done by checking the Last-Modified header. Default value is false. | boolean |
| jsonp | Used to specify call back function in jspnp request. | string |
| jsonpCallback | Used to specify callback function name | function |
| mimeType | String containing a mime type to override the XMLHttpRequest mime type. | string |
| processData | A Boolean indicating whether data assigned to data option will be converted to a query string. Default is true. | boolean |
| success | A callback function to be executed when Ajax request succeeds. | function |
| timeout | A number value in milliseconds for the request timeout. | number |
| type | A type of http request e.g. POST, PUT and GET. Default is GET. | string |
| url | A string containing the URL to which the request is sent. | string |
Example 1 – Ajax GET Request
See the Pen jquery ajax example by Code Topology (@codetopology) on CodePen.
Above is the example of jquery ajax get request. You can see we have used beforeSend() method to show processing state, type key to specify this request is GET request. type key is optional, and if omitted, the request will be considered as GET request.
Example 2 – Ajax POST Request
See the Pen jquery ajax post example by Code Topology (@codetopology) on CodePen.
Above example demonstrates jquery ajax post request. type has been set to post as we are creating a new resource on reqres.in server. We have used data parameters to pass name and job of the user being created.
Note that, before making ajax requests in jquery you must include stable jquery library in your code.
In conclusion, jquery makes AJAX calls much simpler by providing ajax method.
What is the full form of AJAX?
Asynchronous JavaScript And XML
Does jQuery supports AJAX?
Yes, jquery does support ajax.
is AJAX frontend or backend?
AJAX is a frontend technology used to communicate backend resources.
Can we call one ajax call inside other ajax call?
Yes definitely, we can call multiple ajax calls inside the success method of other ajax call.
Will AJAX work if javascript is disabled in client browser?
Unfortunately, AJAX will not work if javascript is disabled, therefore this is the disadvantage of ajax.
Special thanks to reqres.in for providing great dummy APIs 🙂