Javatpoint Logo
Javatpoint Logo

jQuery ajax() method

AJAX is an acronym for Asynchronous JavaScript and XML. It is a group of inter-related technologies like JavaScript, DOM, XML, HTML/XHTML, CSS, XMLHttpRequest etc. It allows us to send and receive data asynchronously without reloading the web page. So it is fast.

The ajax() method in jQuery performs an AJAX request. It sends an asynchronous HTTP request to the server. JQuery provides a rich set of AJAX methods for developing web applications. It is widely used for the requests.

The syntax of using the ajax() method is given as follows.

Syntax

Parameter values

This method can have several name/value pairs for the AJAX requests. The names and values are defined in the following table.

Name Value
async It is a Boolean value. Its default value is true, which means that by default, the request is handled asynchronously. For synchronous requests, we can set it to false.
beforeSend(xhr) It is a callback function that executes before a request is sent.
cache It is a Boolean value. Its default value is true. It represents whether the browser cache the requested pages. On setting it to false, it forces the pages not to be cached by the browser.
complete(xhr, status) It is a callback function executed when the request is finished. It has two arguments that are xhr (XMLHttpRequest) and a status. The status can be "success", "notmodified", "nocontent", "error", etc.It is a callback function executed when the request is finished. It has two arguments that are xhr (XMLHttpRequest) and a status. The status can be "success", "notmodified", "nocontent", "error", etc.
contentType It is used when sending the data to the server. Its default value is "application/x-www-form-urlencoded".
data It is data sent to the server. It could be a string, an array, or a JSON object.
dataFilter(data, type) It is a function that handles the raw response data of the XMLHttpRequest. It accepts two parameters.
dataType It is the type of data we are expecting from the server.
error(xhr, status, error) It is a callback function that gets executed when a request fails. It accepts three arguments.
global It is a Boolean value. Its default value is true. It represents whether to trigger a global AJAX event handler or not.
ifModified It is a Boolean value. Its default value is false. It specifies a request to be successful if the response has changed since the last header.
jsonp It is a string that overrides the callback function name in a jsonp request.
jsonpCallback It is a string that contains the name of the callback function for a jsonp request.
password It is used to specify a password that is to be used in an HTTP access authentication request.
processData It is a Boolean value. Its default value is true. It is used to specify whether or not the data sent with the request should be converted into a query string.
scriptCharset It specifies the charset for the request. It applies only when the "script" transport is used.
success(result, status, xhr) As its name implies, this callback function executes when the request succeeds. It accepts three arguments.
timeout It is the timeout for the request in terms of milliseconds. If it is set to the value 0, it means that there is no timeout.
traditional It is a Boolean value. We can set it to true if we want to use the traditional style of param serialization.
type It specifies the type of http request, such as POST, PUT, and GET. Its default value is GET.
url It is the URL to which the request is sent. Its default value is the current page.
username It is a username that is to be used in an HTTP access authentication request.
xhr It is a callback function that is used for creating the XMLHttpRequest object.

Let's understand the use of ajax() method by using some illustrations.

Example1

There are some steps given below. Follow these steps to understand the use of ajax() method more clearly.

  • First, we have to either download a jQuery library or find a link of jQuery's latest version by going to its official website.
  • Second, we need to create an HTML document, including the jQuery library.
  • Then, within the <script> tag write jQuery's ready() function, and write the ajax() method in its body. Now, we can pass the parameters to the ajax() function. We must have to include the URL to send the request as the first property. After URL, we can set any optional properties such as type, async, cache, success, error, complete, etc. to the ajax() function.

Now, let's see the code of using the ajax() method. In this example, we are including the URL parameter and the optional type parameter. In this example, the ajax() method is used to add the content using ajax request.

Here, we are passing the test.html to the URL parameter of the ajax() method.

test.html

Example2.html

Test it Now

Output

After the execution of the above code, the output will be -

jQuery ajax() method

On clicking the given button, the output will be -

jQuery ajax() method

Example2

It is another example of using the ajax() method. Here, we are using the optional async attribute and set it to false for an asynchronous request.

test.html

Example2.html

Test it Now

Output

After the execution of the above code, the output will be -

jQuery ajax() method

On clicking the given button, the output will be -

jQuery ajax() method

Example3

This is another example of using the ajax() method. Here, we are passing a .js file to the URL parameter of the ajax() method. We are also using the optional dataType parameter and set it to script value.

test.js

Example2.html

Output

Test it Now

After the execution of the above code, the output will be -

jQuery ajax() method

On clicking the given button, the output will be -

jQuery ajax() method

The above examples will help you to understand the concept of ajax() method.






Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA