XHR

XMLHttpRequest, commonly abbreviated as XHR, is a browser-based API that allows web applications to send and receive data from a server without requiring a full page reload. It was introduced in the early 2000s and became one of the key technologies behind the rise of dynamic, interactive websites. While the XML in its name reflects the format it was initially designed to handle, XHR can send and receive data in multiple formats, including JSON, HTML, and plain text.

How XHR Works

At its core, XHR enables asynchronous communication between a web page and a server. Instead of waiting for an entire page to refresh, XHR allows the page to update parts of its content in real time. A script on the page creates a request, which the browser sends to the server. Once the server responds, the page updates with the new information. This workflow powers features like auto-refreshing feeds, form validation without reloads, and dynamic filtering of content.

XHR played a foundational role in the development of what became known as AJAX (Asynchronous JavaScript and XML). AJAX techniques, powered by XHR, enabled seamless user experiences like live search suggestions, chat applications, and dashboards that update without interruption. Today, XHR has largely been supplemented by the modern fetch API, which is simpler and more flexible, but XHR remains widely supported and still used across many websites.

Common Use Cases

• Live search results: Updating search suggestions as a user types.
• Form submission: Sending form data without reloading the entire page.
• Data refresh: Pulling updated content from the server, such as notifications or stock prices.
• Background tracking: Sending analytics events to a server without disrupting the user experience.