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

<h1> Hello World </h1>
<h2> Welcome to the javaTpoint.com </h2>

Example2.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
jQuery.ajax({
url: 'test.html',
type: 'GET',
  success: function(data) {
    $("#para").html(data);              
  }
});
  });
});
</script>
</head>
<body>

<h3> This is an example of using the jQuery's ajax() method. </h3>
<h4> Click the following button to see the effect. </h4>
<button> Click me </button>
<p id = "para"></p>

</body>
</html>

Test it Now

Output

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

On clicking the given button, the output will be -

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

<h1> Hello World </h1>
<h2> Welcome to the javaTpoint.com </h2>

Example2.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
jQuery.ajax({
url: 'test.html',
type: 'GET',
async: false,
  success: function(res) {
    $("#para").html(res);              
  }
});
  });
});
</script>
</head>
<body>

<h3> This is an example of using the jQuery's ajax() method. </h3>
<h4> Click the following button to see the effect. </h4>
<button> Click me </button>
<p id = "para"></p>

</body>
</html>

Test it Now

Output

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

On clicking the given button, the output will be -

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

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({url: "test.js", dataType: "script"});
  });
});
</script>
</head>
<body>

<h3> This is an example of using the jQuery's ajax() method. </h3>
<h4> Click the following button to see the effect. </h4>
<button> Click me </button>
<p id = "para"></p>

</body>
</html>

Output

Test it Now

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