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.


$.ajax({parameterName:value, parameterName:value, ... });

You can see, we can pass parameters inside braces to set preference for ajax call.


In this section, we will see all available jquery ajax parameters and their usage.

OptionDescriptionValue Type
acceptsThe content type sent in the request header tells the server what kind of response it will accept in return.string
asyncIt tells requests should be asynchronous or synchronous, by default all requests are asynchronous.boolean
beforeSendThis parameter is used set some tasks which should be executed before making AJAX call.function
cacheSpecifies whether browser should cache or not this requestboolean
completeA callback function to be executed when request finishes.function
contentTypeSpecifies a content types that are being sent to serverstring
crossDomainspecifies a boolean value indicating whether a request is a cross-domain.boolean
datarequest body, It can be JSON, string or array.string,json,array
dataTypeThe type of data that you’re expecting back from the server.string
errorA callback function to be executed when there is an error while executing a requestfunction
globalA Boolean indicating whether to trigger a global Ajax request handler or not. Default is true.boolean
headersAn object of additional header key/value pairs to send along with request.json,object
ifModifiedAllow 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
jsonpUsed to specify call back function in jspnp request.string
jsonpCallbackUsed to specify callback function namefunction
mimeTypeString containing a mime type to override the XMLHttpRequest mime type.string
processDataA Boolean indicating whether data assigned to data option will be converted to a query string. Default is true.boolean
successA callback function to be executed when Ajax request succeeds.function
timeoutA number value in milliseconds for the request timeout.number
typeA type of http request e.g. POST, PUT and GET. Default is GET.string
urlA 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 *