What are the uses of XMLHTTPRequest Object in Ajax ?
In this article, we will know about the XMLHttpRequest and how it can be useful for the 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:
var objectname = new XMLHTTPRequest();
For detailed description about 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 //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 integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script><script src="script.js"></script></body></html> |
script.js
$('#fetch').click(()=>{ //create a new request var xhr=new XMLHttpRequest(); //request is received xhr.onload=()=>{ console.log(xhr.response) //convert string into json object var response=JSON.parse(xhr.response); var image=response.message; $('#dog-image').attr('src',image) }; //cant get response xhr.onerror=()=>{ alert("response failed") } //open a request //send a request xhr.send()}) |
Output
Please Login to comment...