Make AJAX POST Request in JavaScript

04/10/2023

Contents

In this article, you will learn how to make an AJAX POST request in JavaScript.

Making AJAX POST request in JavaScript

In JavaScript, you can make an AJAX (Asynchronous JavaScript and XML) POST request using the built-in XMLHttpRequest object or the more modern fetch() API. The XMLHttpRequest object has been available in browsers for a long time and is widely used, while the fetch() API is a newer and more modern way to make HTTP requests.

Here’s an example of how to make an AJAX POST request using the XMLHttpRequest object in JavaScript:

const xhr = new XMLHttpRequest();
const url = '/api/data';
const data = JSON.stringify({ name: 'John', age: 30 });

xhr.open('POST', url, true);
xhr.setRequestHeader('Content-type', 'application/json');

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const responseData = JSON.parse(xhr.responseText);
    console.log(responseData);
  }
};

xhr.send(data);

In this example, we create a new XMLHttpRequest object and define the URL and data for the POST request. We then call xhr.open(‘POST’, url, true) to set up the request with the URL and the HTTP method. The third parameter to xhr.open() specifies whether the request should be asynchronous (true) or synchronous (false).

We set the Content-type request header to application/json using the xhr.setRequestHeader() method. This specifies that the data being sent is in JSON format.

We define a callback function for the onreadystatechange event, which fires whenever the state of the XMLHttpRequest object changes. In the callback function, we check if the readyState property is 4 (which indicates that the request has completed) and the status property is 200 (which indicates that the request was successful). If both conditions are met, we parse the response data (which is in JSON format) using the JSON.parse() method and log it to the console.

Finally, we call xhr.send(data) to send the POST request with the specified data.

Here’s an example of how to make an AJAX POST request using the fetch() API in JavaScript:

const url = '/api/data';
const data = { name: 'John', age: 30 };

fetch(url, {
  method: 'POST',
  headers: {
    'Content-type': 'application/json'
  },
  body: JSON.stringify(data)
})
.then(function(response) {
  if (response.ok) {
    return response.json();
  }
  throw new Error('Network response was not ok.');
})
.then(function(data) {
  console.log(data);
})
.catch(function(error) {
  console.error(error);
});

In this example, we define the URL and data for the POST request, and use the fetch() method to send the request. We pass the URL and an options object as arguments to fetch(), which specifies the HTTP method, headers, and body of the request.

We use the then() method to handle the response data. If the response is ok (which indicates that the request was successful), we parse the response data as JSON using the json() method and log it to the console in the next then() method.

If the response is not ok, we throw an error and catch it in the catch() method, where we log the error to the console.

Note that when sending data with AJAX POST requests, the data should be serialized (i.e. converted to a string) and sent in the request body. In these examples, we’re serializing the data as JSON using the JSON.stringify() method.

#JavaScript