XMLHttpRequest, commonly known as xhr, is a browser API that lets web applications send and receive data from a server without reloading the page. It powers much of the interactivity seen in modern single-page apps, from live search suggestions to background data sync.
Unlike a simple link or form submission, xhr runs asynchronously in the background, allowing developers to update just part of a page while keeping the user experience smooth and responsive.
How XMLHttpRequest Works at a Glance
The following table summarizes core aspects of xhr, from its origins to typical usage patterns and limitations in today’s web stack.
| Aspect | Description | Typical Use Case | Modern Alternative |
|---|---|---|---|
| Name | XMLHttpRequest | Legacy but still widely supported API | Fetch API |
| Origin | Introduced in early 2000s by Microsoft, adopted across browsers | Enabling dynamic web updates before modern frameworks | Fetch, Axios, GraphQL clients |
| Asynch Model | Event-driven with readyState and onreadystatechange, or Promises via wrappers | Polling, progressive loading, streaming responses | async/await with fetch |
| Cross-Origin | Subject to CORS; credentials can be controlled with withCredentials | Calling third-party APIs from the browser when CORS headers permit | Same requirements as fetch; server-side proxies remain common |
| Timeouts & Progress | Built-in timeout property, upload and download progress events | File uploads with progress bars, long-running request monitoring | Fetch lacks native progress; requires workarounds or libraries |
Creating and Opening an XHR Request
At the foundation, every xhr interaction starts with creating an instance and opening a connection. The open method sets the HTTP method and target URL, preparing the request object for further configuration.
Developers typically choose between synchronous and asynchronous modes, although synchronous usage on the main thread is strongly discouraged due to its blocking nature and deprecation in many contexts.
Sending Data and Handling Responses
After opening a connection, the send method dispatches the request, optionally carrying a body for POST, PUT, or PATCH calls. Headers can be set before sending to control content type, authentication tokens, and custom parameters.
The response travels through several readyState values, and developers monitor changes via onreadystatechange or preferred wrappers like promise-based adapters. Accessing the final data usually depends on the responseType, which can range from text and JSON to blob and arraybuffer formats.
Security, CORS, and Credentials
Security policies strongly shape how xhr behaves across origins. Browsers enforce cross-origin rules, and mismatched protocols, hosts, or ports trigger preflight checks when certain headers or methods are used.
Proper configuration of the withCredentials flag ensures cookies and authorization headers are included when allowed, while server-side CORS headers dictate whether the browser surfaces the response to the calling script.
XHR in Modern Application Architectures
Even as newer APIs gain popularity, xhr remains relevant in legacy codebases, embedded systems, and environments where fine-grained control over request lifecycle is valuable. Its event model supports granular progress and error handling that some higher-level abstractions intentionally hide.
Understanding xhr helps debug issues in older applications and provides insight into the fundamentals that influenced the design of today’s fetch-based tools and libraries.
Best Practices and Modern Recommendations
- Prefer the Fetch API or a well-maintained wrapper for new projects to benefit from modern syntax and better error handling.
- Use xhr only when you need specific features like upload progress or must support very old browser environments.
- Always set appropriate timeouts and handle network errors gracefully to improve reliability.
- Centralize API communication behind service modules so you can migrate from xhr to fetch or other clients with minimal friction.
- Validate and sanitize server responses, because client-side parsing logic remains a security boundary regardless of the request mechanism.
FAQ
Reader questions
Is XMLHttpRequest the same as the Fetch API?
No, XMLHttpRequest is a separate, older API with its own event model and configuration patterns, while Fetch is a newer, promise-based standard that handles requests and responses differently.
Can I upload files with progress using XMLHttpRequest?
Yes, xhr supports upload and download progress events, enabling developers to show real-time feedback during large file transfers.
Do modern browsers still support XMLHttpRequest?
Yes, all major browsers continue to support XMLHttpRequest for backward compatibility, though new projects are encouraged to consider Fetch or specialized libraries.
Does XMLHttpRequest handle CORS automatically, or do I need server support?
Xhr relies on the server to include proper CORS headers; the browser enforces these rules and will block responses from unauthorized origins.