XHRs

XMLHttpRequest (XHR) is a browser API that enables a web page to send HTTP requests to a server and receive responses without reloading the page. It supports asynchronous requests, which allow dynamic updates, and historically also synchronous requests, though the latter are discouraged in modern code. An XHR instance is created with new XMLHttpRequest(), then configured with open(method, URL, async, user, password). The send(body) method transmits the request, and headers can be customized with setRequestHeader.

The server response is exposed through properties such as readyState, status, statusText, responseText, and responseXML. If a responseType is set (for example 'json','arraybuffer','blob'), the response property contains the data in that type. Typical usage involves setting up event handlers (such as onload, onerror, or onreadystatechange) and then calling send. A common pattern is to check xhr.status in the onload handler and process xhr.responseText or xhr.response, often parsing JSON from responseText.

XHR is subject to the same-origin policy, meaning requests to other origins are restricted unless the server enables cross-origin resource sharing (CORS) with appropriate headers. Cross-origin requests may also require credential handling settings.

In modern development, the Fetch API is often preferred because it uses Promises and provides a simpler, more flexible interface. XHR remains widely supported for legacy code and environments where Fetch is unavailable, but its callback-based model and more verbose API have led to its gradual replacement in new applications.