Sending POST Requests with Pure JavaScript: Using XMLHttpRequest and Fetch API

In modern web development, sending data to a server is a common task. While traditional forms are often used for this purpose, you can send POST requests directly using pure JavaScript without refreshing the page. This tutorial explores two methods for achieving this: XMLHttpRequest and the newer Fetch API.

Introduction

When you need to send data from your client-side application to a server endpoint without reloading the page or utilizing libraries like jQuery, JavaScript offers robust solutions. We’ll explore how to use both XMLHttpRequest, an older but widely supported method, and the modern Fetch API for making asynchronous HTTP requests.

Using XMLHttpRequest

The XMLHttpRequest (XHR) is a browser-based technology that allows you to interact with servers via HTTP. It supports multiple types of request methods, including GET and POST, which are used for retrieving and sending data respectively.

Sending a POST Request

To send a POST request using XHR:

1. Create an Instance: Instantiate the XMLHttpRequest object.
2. Open the Connection: Use the .open() method with the HTTP verb (POST), URL, and asynchronous flag (true).
3. Set Headers: Configure necessary headers like 'Content-Type'.
4. Send the Request: Pass the data in the body using the .send() method.

Here’s an example that sends JSON data:

var xhr = new XMLHttpRequest();
xhr.open("POST", "yourEndpointURL", true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
    if (this.readyState === 4) { // Request is done
        if (this.status === 200) { // Successfully completed
            var response = JSON.parse(this.responseText);
            console.log("Response:", response);
        }
    }
};
var dataToSend = JSON.stringify({ key: "value" });
xhr.send(dataToSend);

Explanation

• readyState === 4: Indicates that the request is complete.
• status === 200: HTTP status code for a successful request.

Using Fetch API

The Fetch API provides a more modern approach to handling network requests and is promise-based, making it easier to use with asynchronous operations. It supports both GET and POST methods along with other HTTP verbs.

Sending a POST Request

Here’s how you can send a POST request using the Fetch API:

1. Define Data: Prepare your data as an object.
2. Use fetch(): Call this function with the URL, and an options object that includes method type, headers, and body.

Example code:

let data = { key: "value" };

fetch("yourEndpointURL", {
    method: "POST",
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
})
.then(response => response.json())
.then(jsonResponse => console.log("Request complete! Response:", jsonResponse))
.catch(error => console.error('Error:', error));

Explanation

• method: Set to "POST" for sending data.
• headers: Used to set content type, often 'Content-Type': 'application/json'.
• body: Contains the stringified JSON data.

Handling Responses

Both methods provide mechanisms to handle server responses:

• XMLHttpRequest: Use onreadystatechange and check readyState and status.
• Fetch API: Utilize .then() for promise resolution, providing a cleaner syntax for handling asynchronous code.

Best Practices

1. Error Handling: Always include error handling in your network requests to manage unexpected issues.
2. Security: Ensure you handle sensitive data securely and validate inputs both client-side and server-side.
3. Asynchronous Operations: Leverage async/await with Fetch API or promise chaining for cleaner asynchronous code management.

Conclusion

By using XMLHttpRequest or the Fetch API, developers can send POST requests effectively without relying on third-party libraries, enabling better control over HTTP communications in JavaScript applications. Understanding these techniques is crucial for developing responsive and interactive web applications that communicate efficiently with backend services.