What are the uses of XMLHTTPRequest Object in Ajax ?

Last Updated : 06 Jun, 2023

In this article, we will know about the XMLHTTPRequest and how it can be useful for client-server request and properties of XMLHttpRequest.

XMLHTTPRequest is an object that sends an HTTP request to the server and interacts with the server to open a URL and retrieve data without loading the complete page so only some part of the web page changed. Here, it is a global constructor function XMLHTTPRequest built into the browser exposed in javascript that is available without any package added and is not only to XML documents, nowadays JSON is mostly used to exchange data between browser and server.

Uses of XMLHTTPRequest object:

It is used to make AJAX calls to exchange data from a remote web server.
With the help of this object, users send requests to the server asynchronously and the server sends the data which we requested for Ajax.
XMLHTTPRequest object is used to prevent attacks from the server-side
It is used in different protocols to make requests like HTTP, HTTPS, FTP, and FRPS.
It is used to retrieve any type of data like XML, JSON, etc.
With the help of this, there is no need to load the whole page it extracts some parts and does changes.
It is used in data exchange with the help of API.

Syntax:

let objectname = new XMLHTTPRequest();

For a detailed description of the XMLHttpRequest object methods & XMLHttpRequest object properties, please refer to the AJAX XMLHttpRequest Object article.

Example: This example describes how XMLHTTPRequest is used in AJAX and utilizes the different XMLHTTPRequest objects for making the request and getting a response from the server using JSON data.

Javascript

//create new request through constructor 
const xhrReq = new XMLHttpRequest();
 
//set up listener 
xhrReq.onload = () => {
 
//get response from the server server 
 let resJSON = JSON.parse(xhrReq.response);
 console.log(resJSON);
};
 
//open url and get new created request
xhrReq.open("get", "https://jsonplaceholder.typicode.com/users", true);
 
//send request to server 
xhrReq.send();

Output:

Example 2: This example describes the XMLHttpRequest object by using the fetching the dog API.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <button id="fetch" style="margin:20px">Fetch</button>
    <div id="container" style="margin:20px">
        <img id="dog-image">
    </div>
    <script src=
"https://code.jquery.com/jquery-3.6.0.js"
            integrity=
"sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
            crossorigin="anonymous">
        </script>
    <script src="script.js"></script>
</body>
 
</html>

Javascript

//script.js
$('#fetch').click(() => {
 
    //create a new request
    let xhr = new XMLHttpRequest();
    //request is received 
    xhr.onload = () => {
        console.log(xhr.response)
        //convert string into json object
        let response = JSON.parse(xhr.response);
        let image = response.message;
        $('#dog-image').attr('src', image)
    };
    //cant get response
    xhr.onerror = () => {
        alert("response failed")
    }
    //open a request
    xhr.open('get', 'https://dog.ceo/api/breeds/image/random', true)
    //send a request
    xhr.send()
})