jQuery ajax() Method With Example

jquery with ajax

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 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *