The XMLHttpRequest object is the fundamental component for AJAX operations. It handles sending requests to the server and receiving responses. Modern browsers have built-in support for this object, so no additional libraries are required.

Creating an XMLHttpRequest Instance

let request = new XMLHttpRequest();

Methods of XMLHttpRequest

Properties of XMLHttpRequest

ReadyState Values in Detail

• 0 (UNSENT): The object has been created but open() has not been called yet.
• 1 (OPENED): open() has been invoked; the request is about to be sent.
• 2 (HEADERS_RECEIVED): send() has been called and headers are available.
• 3 (LOADING): The response is being received; partial data is available.
• 4 (DONE): The request is complete and the full response is ready for processing. Check status to confirm success.

Common HTTP Status Codes

• 1xx (Informational): Request received, continuing process.
  100 Continue – initial part accepted.
• 2xx (Success): Request was understood and processed.
  200 OK
  201 Created
  204 No Content
• 3xx (Redirection): Further action needed.
  301 Moved Permanently
  302 Found
  304 Not Modified
• 4xx (Client Error): request contains bad syntax or cannot be fulfilled.
  400 Bad Request
  401 Unauthorized
  404 Not Found
• 5xx (Server Error): The server failed to fulfill a valid request.
  500 Internal Server Error
  503 Service Unavailable

Using responseText

The responseText property holds the server’s response as a plain string. After a successful request, you can parse this string (e.g., JSON or HTML) and update the page.

let request = new XMLHttpRequest();
request.open("GET", "https://api.example.com/data", true);
request.send();

request.onreadystatechange = function() {
  if (request.readyState === 4 && request.status === 200) {
    let responseData = request.responseText;
    console.log(responseData);
    // Process the response further
  }
};

The open() Method in Depth

open() initializes a request. Its signature is:

request.open(method, url, async, user, password);

• method: typically "GET" or "POST".
• url: relative or absolute path to the resource.
• async (optional, default true): if false, the request blocks execution until complete.
• user and password (optional): credentials for HTTP authentication.

Example with authentication:

request.open("GET", "https://api.example.com/secure", true, "admin", "secret");