How to send HTTP POST request using JavaScript

HTTP (Hypertext Transfer Protocol) is the underlying protocol used by the World Wide Web to transfer data between a client (browser) and a server. HTTP requests are used by browsers to request resources like HTML, CSS, and JavaScript files from a server. HTTP POST requests, on the other hand, are used to submit data to a server. In this article, we will explore how to make HTTP POST requests using JavaScript.

The HTTP POST request method is used to send data to the server, typically to update or create a resource. When a client sends an HTTP POST request, it includes a payload (data) that the server can use to perform an action. The payload can be in many different formats, such as JSON, XML, or plain text.

To make an HTTP POST request in JavaScript, we can use the fetch() API or the XMLHttpRequest object. The fetch() API is a modern, lightweight alternative to the XMLHttpRequest object, which has been available in browsers for many years. We will discuss both methods below.

How to send POST request using JavaScript

By the following methods, you can send HTTP POST request in javaScript:

• Using the fetch() API
• Using the XMLHttpRequest object

Using the fetch() API

The fetch() API is a modern and easy-to-use interface for making HTTP requests. It returns a Promise that resolves to the response from the server. To make an HTTP POST request using the fetch() API, we need to specify the URL we want to send the request to, the HTTP method (in this case, POST), and the data we want to send in the request body. Here’s an example:

fetch('https://example.com/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John Doe', age: 30 })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))

In the code above, we are sending an HTTP POST request to the URL https://example.com/api/data with the payload { name: 'John Doe', age: 30 }. We are also setting the Content-Type header to application/json to indicate that we are sending JSON data in the request body. After the request is sent, we are using the then() method to parse the response as JSON and log it to the console.

Using the XMLHttpRequest object

The XMLHttpRequest object is a more traditional way of making HTTP requests in JavaScript. It has been available in browsers for many years and is still widely used today. To make an HTTP POST request using the XMLHttpRequest object, we need to create a new instance of the object, set the HTTP method to POST, set the request headers, and send the request body. Here’s an example:

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/api/data');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.response);
  } else {
    console.error(xhr.statusText);
  }
};
xhr.onerror = function() {
  console.error('An error occurred.');
};
xhr.send(JSON.stringify({ name: 'John Doe', age: 30 }));

In the code above, we are creating a new XMLHttpRequest object and setting the HTTP method to POST. We are also setting the Content-Type header to application/json to indicate that we are sending JSON data in the request body. After the request is sent, we are using the onload event handler to check the status of the response and log it to the console if it’s successful.

Conclusion

HTTP POST requests are an essential part of web development, and JavaScript provides several

Recommended JavaScript Tutorials