AJAX – The XMLHttpRequest Object

The XMLHttpRequest object is the foundation of AJAX, enabling asynchronous communication between a web browser and a server. It allows web applications to send and retrieve data without requiring a full page reload, improving the performance and interactivity of modern websites.

What is XMLHttpRequest?

The XMLHttpRequest (XHR) object is a JavaScript API that facilitates the following tasks:

  • Sending HTTP/HTTPS requests to a server.
  • Receiving responses from a server.
  • Handling data in formats like XML, JSON, plain text, or HTML.

Creating an XMLHttpRequest Object

To use the XHR object, you first create an instance of it:

let xhr = new XMLHttpRequest();

XMLHttpRequest Methods

Here are the essential methods of the XHR object:

  • open(method, url, async): Prepares a request.
    • method: HTTP method (e.g., GET, POST).url: Server URL.async: Boolean; true for asynchronous (default).
    Example: 
xhr.open("GET", "https://api.example.com/data", true);
  • send(data): Sends the request to the server.
    • data: Optional data for POST requests.
    Example: 
xhr.send();
  • setRequestHeader(header, value): Sets HTTP headers for the request. Example: 
xhr.setRequestHeader("Content-Type", "application/json");

XMLHttpRequest Properties

Key properties of the XHR object:

  • readyState: Indicates the state of the request. Value State Description 0 UNSENT Request not initialized. 1 OPENED Connection established. 2 HEADERS_RECEIVED Response headers received. 3 LOADING Data is being downloaded. 4 DONE Request finished, response ready.
  • status: HTTP response status code (e.g., 200 for OK).
  • responseText: Returns the server’s response as a string.
  • responseXML: Returns the response as an XML document (if applicable).

Example: GET Request

let xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.error(`Error: ${xhr.status}`);
  }
};

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

xhr.send();

Example: POST Request

let xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.example.com/data", true);
xhr.setRequestHeader("Content-Type", "application/json");

xhr.onload = function() {
  if (xhr.status === 201) {
    console.log("Data submitted successfully:", xhr.responseText);
  } else {
    console.error(`Error: ${xhr.status}`);
  }
};

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

Handling Errors

Always handle errors to ensure a seamless user experience:

xhr.onerror = function() {
  console.error("Request failed. Check your internet connection.");
};

Advantages of XMLHttpRequest

  • Asynchronous operations: Improves user experience by avoiding page reloads.
  • Wide compatibility: Supported across all major browsers.
  • Flexibility: Can handle various data formats.

Limitations of XMLHttpRequest

  • Complex Syntax: More verbose compared to modern APIs like fetch.
  • CORS Issues: Requires proper server-side configuration for cross-origin requests.

Modern Alternatives: Fetch API

While XHR is robust, modern JavaScript applications often prefer the Fetch API for its simpler syntax and support for promises. For instance:

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

Conclusion

The XMLHttpRequest object remains a critical tool for understanding AJAX, providing the foundation for dynamic, asynchronous web applications. For developers seeking to master client-server communication, learning XHR is a must. For more tutorials and insights on JavaScript, visit The Coding College.

Leave a Comment