Sending Asynchronous POST Requests with XMLHttpRequest

The XMLHttpRequest API provides web developers with an invaluable tool – the ability to exchange data with servers behind the scenes, without full page reloads. This article will provide an in-depth, comprehensive look at using XMLHttpRequest to transmit POST requests asynchronously.

GET vs. POST Requests

XMLHttpRequest can send both GET and POST requests. The difference lies in how data is encoded.

GET Request Example

GET requests encode parameters directly in the URL query string:

GET /search?term=javascript&limit=10 HTTP/1.1
Host: www.example.com

Benefits:

• Can be cached and remain idempotent
• Useful for non-sensitive data retrieval

Limitations:

• Size restrictions on query length
• Not appropriate for sensitive data
• Can be logged in server access logs

POST Request Example

POST requests store data in request body:

POST /api/search HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 27
term=javascript&limit=10

Benefits:

• No size restrictions on data
• More secure – data not logged or stored in browser history
• Ideal for sensitive transmissions

As a rule of thumb, use POST whenever you are transmitting sensitive data or payloads that exceed URL length restrictions.

Browser Support

The XMLHttpRequest API enjoys excellent mainstream browser support, with complete functionality in all modern browsers. Support data per CanIUse:

Chrome	1+
Firefox	1+
Safari	1+
Edge	12+

For legacy IE, a separate ActiveXObject API provides similar XHR capabilities. Overall this technology can be dependably utilized in virtually any browser environment a developer encounters.

Creating an Asynchronous POST Request

Below is a detailed walkthrough of the JavaScript code powering an AJAX POST over XMLHttpRequest.

1. Instantiate an XMLHttpRequest Object

const xhr = new XMLHttpRequest();

The constructor returns a fresh XMLHttpRequest instance you can use for data transmission.

2. Open a Request

xhr.open(‘POST‘, ‘/api/data‘);

The open() method initializes a request. It accepts the HTTP method, target URL, and optional async flag:

• POST – HTTP request method
• /api/data – Target endpoint URL
• Async – Omitted boolean to send asynchronously

We will POST data to an API endpoint on example.com in this example. Asynchronous mode enables non-blocking background transmission.

3. Define a Callback Function

 
xhr.onreadystatechange = function() {
  // Process response
  if(xhr.readyState === 4 && xhr.status === 200) {
    // Handle response data
  }
});

The callback executes when the request completes. We first ensure:

• readyState is 4 (DONE) – Marks request finished.
• status is 200 (OK) – Indicates successful HTTP response.

Once those conditions pass, we have valid repsonse data in responseText ready for processing.

4. Send Request Payload Data

const data = JSON.stringify({
  name: "John Smith",
  age: 30 
});
xhr.send(data); 

Calling send() with data initiates transmission. This is where we include:

• Request headers via setRequestHeader()
• Request payload form data or other content

And that fully covers hooking up a basic asynchronous POST using vanilla JavaScript XMLHttpRequest!

Synchronous vs. Asynchronous

The example demonstrates the asynchronous technique where send() returns immediately. Alternatively, we could have passed false to open() to transmit the request synchronously and block code flow:

xhr.open(‘POST‘, ‘/data‘, false); 

However, synchronous requests degrade user experience by locking up the browser until a response returns. Hence asynchronous communication is strongly preferred for most UI-driven applications.

Common POST Use Cases

Some typical use cases well-suited for XMLHttpRequest POST requests:

• Submitting Forms – Gather input data without reloading
• Live Search – Fetch real-time search results behind the scenes
• Updating Dashboards – Refresh reports/metrics dynamically
• CRUD Apps – Create, read, update, delete data rapidly

POST-driven XMLHttpRequest integrates cleanly with custom backends, REST APIs, databases and virtually any other persistent storage system.

Asynchronous Considerations

Special care must be taken when working with asynchronous logic:

Race Conditions

If requests execute out of sequence, this can cause unexpected outcomes:

xhr.open(‘POST‘, ‘/article‘); // Request 1
xhr.send();
xhr.open(‘POST‘, ‘/author‘); // Request 2 
xhr.send();  

Here Request 2 may finish before the first! Use callback sequencing to prevent.

Unhandled Exceptions

Bugs in asynchronous callback code won‘t trigger try/catch blocks:

try {
  setTimeout(function() {
    // Bugs here are uncaught!
  }, 1000);
} catch (err) {
  // This won‘t run!
}

So take care to handle all errors properly within callbacks.

Security Considerations

Since POST operations often transmit or alter sensitive data, security is paramount. Always validate inputs and escape untrusted payloads.

Enable HTTP-only cookies and CORS restrictions to lock down browser-based origins. Require authorization via secure protocols like OAuth or JWTs.

For truly bulletproof protection, leverage SSL certificates to encrypt all AJAX communication channels.

XMLHttpRequest vs. Fetch API vs jQuery

The XMLHttpRequest object enables AJAX queries in vanilla JS. However, there are also alternatives:

Fetch API

The modern Fetch API offers a simplified approach leveraging Promises.

  
fetch(‘/data‘, {
  method: ‘POST‘,
  headers: {
   // ... 
  }   
})
.then(response => {
  // Process response
})

This streamlines asynchronous flows. However, Fetch lacks IE support.

jQuery AJAX

As a popular JavaScript library, jQuery also delivers capable XHR implementations:

  
$.ajax({
  url: ‘/data‘,
  type: ‘POST‘, 
  success: function(response) {
     // Handle response     
  }
});

However, this loads a more bloated codebase than pure XMLHttpRequest.

So XMLHttpRequest strikes the best cross-environment balance for most applications.

Conclusion

The XMLHttpRequest object enables game-changing asynchronous communication flows behind the scenes. Mastering AJAX POST technique empowers rich, dynamic web experiences.

This deep dive illustrated how to transmit POST data with XMLHttpRequet, including guidelines for security, async logic, production use cases and more.

By following these patterns, front-end developers can build more seamless UIs than ever before. The knowledge to send POST requests like a pro places powerful asynchronous utilities right at your fingertips!