XMLHttpRequest - (AJAX Key Concepts)

AJAX (Asynchronous JavaScript and XML) is a technique used to create fast and dynamic web pages by making asynchronous calls to the server. The XMLHttpRequest object is a key concept in AJAX and is used to send HTTP requests to the server and receive a response. In this tutorial, we'll discuss the syntax, example, output, explanation, use, important points, and summary of the XMLHttpRequest object.

Syntax

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    // response received
  }
};
xhttp.open("GET", "url", true); // true for asynchronous
xhttp.send();

Example

Let's use the XMLHttpRequest object to make an asynchronous request to a server and output the response to the console.

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(this.responseText);
  }
};
xhttp.open("GET", "https://jsonplaceholder.typicode.com/todos/1", true);
xhttp.send();

The output of the above code would be the response from the server for the specified URL.

Explanation

In this example, we created a new instance of the XMLHttpRequest object and assigned an event listener to it to handle the response from the server. We then opened a connection to the server using the open() method and specified the URL and the HTTP method (GET in our case). We also set the third parameter to true to make the request asynchronous. Finally, we sent the request using the send() method.

Once the response is received, the onreadystatechange event is triggered and the readyState and status properties of the XMLHttpRequest object are checked to ensure that a successful response was received. When a successful response is received, the responseText property of the XMLHttpRequest object is logged to the console.

Use

The XMLHttpRequest object is used to make asynchronous HTTP requests to the server and receive a response. This allows for dynamic updates to web pages without reloading the entire page.

Important Points

• The onreadystatechange event is triggered whenever the ready state of the XMLHttpRequest object changes.
• The readyState property of the XMLHttpRequest object represents the current state of the request.
• The status property of the XMLHttpRequest object represents the HTTP status code of the response.
• The responseText property of the XMLHttpRequest object contains the response from the server as a string.
• The open() method of the XMLHttpRequest object is used to specify the URL, HTTP method, and other options for the request.
• The send() method of the XMLHttpRequest object is used to send the request to the server.

Summary

In this tutorial, we discussed the XMLHttpRequest object and its use in AJAX. We covered the syntax, example, output, explanation, use, important points, and summary of the XMLHttpRequest object. With this knowledge, you can now use the XMLHttpRequest object to make asynchronous HTTP requests to a server and receive a response in your web applications.