XMLHttpRequest

/ˌɛks-ɛm-ɛl-ˌhɪt-ti-pi rɪˈkwɛst/

n. “Old school, but still gets the job done.”

XMLHttpRequest, often abbreviated as XHR, is a JavaScript API that enables web browsers to send HTTP requests to servers and receive responses without needing to reload the entire page. Introduced in the early 2000s, it became the backbone of what we now call AJAX (Asynchronous JavaScript and XML), allowing dynamic updates and interactive web applications.

Despite the name, XMLHttpRequest is not limited to XML. It can handle JSON, plain text, HTML, or any type of response. A typical request looks like:

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send(); 

Here, open sets up the HTTP method and URL, onload handles the response, and send dispatches the request. Errors and progress events can also be monitored using onerror and onprogress handlers, providing fine-grained control over network communication.

XMLHttpRequest has largely been superseded by the fetch API in modern development, which offers a cleaner, promise-based approach and improved readability. However, XHR remains relevant for legacy applications, older browsers, and cases where fine-grained event handling or synchronous requests are needed.

In practical terms, XMLHttpRequest enabled a shift from static, page-reloading websites to dynamic web apps, laying the foundation for single-page applications (SPAs) and real-time data updates that we take for granted today. Its design influenced modern APIs like fetch, and understanding XHR is essential for maintaining or interfacing with older web systems.