XMLHttpRequest

The traditional method for making HTTP requests to a server. It allows you to fetch and send data without reloading the page, and has long served as the foundation for Ajax communication.

Syntax

var xhr = new XMLHttpRequest();
xhr.open("method", "URL");
xhr.onreadystatechange = function() {
	if (xhr.readyState === 4 && xhr.status === 200) {
		// Code to run on success
	}
};
xhr.send();

Methods

Method	Description
open("method", "URL")	Initializes the request. The first argument specifies the HTTP method, and the second specifies the URL. Passing `false` as the third argument makes the request synchronous, but this is not recommended.
send()	Sends the request. For POST requests, pass the data to send as an argument.
setRequestHeader("name", "value")	Sets a request header. Must be called after `open()` and before `send()`.

Properties

Property	Description
readyState	Returns the current state of the request as a number. `0` = unsent, `1` = opened, `2` = headers received, `3` = loading, `4` = done.
status	Returns the HTTP status code. `200` means success, `404` means not found, and `500` means a server error.
responseText	Returns the server's response as a string.
onreadystatechange	Sets an event handler that is called whenever `readyState` changes.

Sample Code

// Example: fetching data with a GET request
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/users");
xhr.onreadystatechange = function() {
	if (xhr.readyState === 4) { // Request complete
		if (xhr.status === 200) { // Success
			var data = JSON.parse(xhr.responseText); // Parse the JSON string into an object.
			console.log(data);
		} else {
			console.log("Error: " + xhr.status); // Log the status code.
		}
	}
};
xhr.send();

// Example: sending data with a POST request
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.example.com/users");
xhr.setRequestHeader("Content-Type", "application/json"); // Tell the server we're sending JSON.
xhr.onreadystatechange = function() {
	if (xhr.readyState === 4 && xhr.status === 200) {
		console.log("Registered: " + xhr.responseText);
	}
};
var sendData = JSON.stringify({ name: "Taro", age: 25 });
xhr.send(sendData); // Send the JSON string.

Overview

XMLHttpRequest is an object used to send HTTP requests from JavaScript to a server. It has been the core of a technique called "Ajax," which allows pages to exchange data with a server without reloading, and has been in use for many years.

The communication flow follows four steps: create an XMLHttpRequest object, configure the request with open(), set a callback with onreadystatechange, and send with send(). When readyState reaches 4, the request is complete — at that point you check status and process the response.

Today, fetch() is recommended as a simpler alternative. XMLHttpRequest is callback-based and can be verbose, but it remains essential to understand when you need compatibility with older browsers or when maintaining existing code.