Sling Academy
Home/JavaScript/Make AJAX Requests with XMLHttpRequest in JavaScript

Make AJAX Requests with XMLHttpRequest in JavaScript

Last updated: December 14, 2024

In modern web development, asynchronous HTTP requests are a common requirement, allowing websites to fetch data in the background without overwhelming the user experience. One popular method in JavaScript to fulfill this requirement is using XMLHttpRequest. Despite the advent of newer and more simplified methods like the Fetch API, XMLHttpRequest remains a staple in understanding the fundamentals of AJAX requests.

Understanding XMLHttpRequest

The XMLHttpRequest object is a core part of classic AJAX architecture. It allows developers to perform network requests to send or receive data without refreshing the page. This can enhance the user interface by exchanging data with the server after the page has loaded.

Creating an XMLHttpRequest Object

To initiate an AJAX request using XMLHttpRequest, the first step is to create an XMLHttpRequest object. Here is a basic example:

var xhr = new XMLHttpRequest();

This line of code creates a new instance of the XMLHttpRequest object that can be used to initiate an HTTP request.

Opening a Request

Once you have an instance of XMLHttpRequest, the next step is to use the open() method to specify the request type and the URL:

xhr.open('GET', 'https://api.example.com/data', true);

Here, GET specifies the HTTP method, then comes the URL to which the request is sent. The last parameter, true, indicates that the request should be asynchronous.

Sending the Request

After opening the request, the next step is to send it using the send() method:

xhr.send();

For a GET request, the send() method can be called without any arguments.

Handling Response

To handle the server response, the onreadystatechange property is used to define a function to be executed when the readyState changes.

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error('Request failed', xhr.status);
    }
  }
};

The readystate property holds the status of the XMLHttpRequest, and the status property contains the HTTP status code if the request has completed. The response is accessible via responseText or responseXML for text or XML data, respectively.

Making POST Requests

To send data to the server, a POST request is required:

xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('param1=value1¶m2=value2');

When using POST, it’s common to include setRequestHeader() to specify the content type. In this case, we're sending URL-encoded data. You could also use application/json if sending JSON.

Error Handling

Error handling in XMLHttpRequest can be done using event listeners for error events:

xhr.onerror = function() {
  console.error('Request error...');
};

This captures any network errors that occur during the transaction. For detailed debugging, examine xhr.status or console messages.

Benefits & Limitations

The main advantage of XMLHttpRequest is its widespread support across browsers. However, it’s worth noting some limitations, such as verbose syntax and a lack of Promise support, which can result in complex callback patterns.

Despite its quirks, understanding XMLHttpRequest gives developers solid groundwork to tackle more advanced asynchronous operations with newer APIs like Fetch or Axios that provide a simpler, promise-based approach.

Thus, mastering XMLHttpRequest remains an integral part of becoming proficient in effective and responsive web application development.

Next Article: Handle XML and JSON Responses via JavaScript XMLHttpRequest

Previous Article: Customize Subtitle Styling Using JavaScript WebVTT Integration

Series: Web APIs – JavaScript Tutorials

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Customize Subtitle Styling Using JavaScript WebVTT Integration
  • Integrate Accessibility Features via the WebVTT API in JavaScript