XMLHttpRequest is an object that is used to send a request to the webserver for exchanging data or transferring and manipulating to it and from the server behind the scenes. You can use the received data to update the data present on the web page without even reloading the page.
Below is the complete syntax to use XMLHttpRequest object.
Syntax:
At first, you have to invoke the XMLHttpRequest() method as shown below.
var variable_name = new XMLHttpRequest();
After calling the XMLHttpRequest() method you have to define a callback function that will trigger after getting the response.
variable_name.onload = function () {
// Content of callback function
// after getting the response
}Sending a request using the open() and send() methods as shown below.
variable_name.open("GET", "textFile.txt");
variable_name.send();The XMLHttpRequest object has different functions and properties that are listed below.
XMLHttpRequest object methods:
- new XMLHttpRequest(): It creates a new XMLHttpRequest object.
- abort(): This method will cancel the current request to exchange data.
- getAllResponseHeaders(): It will return a set of HTTP headers in form of a string.
- getResponseHeader(): It will return the specified HTTP header information.
- open(method, URL, async, userName, password): This method specifies the method, URL, and other parameters of a request. In this function call, the method parameter defines the operation that has to be performed on the data like GET, POST, HEAD, and some other HTTP methods such as PUT, DELETE. The async parameter specifies the asynchronous behavior of the request. It holds two values true and false. If the value is true then the script processing will continue after send() method without waiting for the response while false value means that the script will wait for a response before processing it.
- send(): It will send the request to the server for data exchange. To GET the requests, send() is used.
- send(string): It also sends the request to the server for data exchange, but It is used to POST the requests.
- setRequestHeader(): It will add the label and value pair to the header that has to be sent.
Example: Below example illustrates the use of XMLHttpRequest() object methods.
HTML
<!DOCTYPE html> <html>
<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>Ready states of a request in ajax</title>
<style>
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="container">
<h1>Hey Geek,</h1>
<h3>Welcome to GeeksforGeek!</h3>
<button type="button" onclick="stateChange()">
Update Text
</button>
</div>
<script>
function stateChange() {
var state = new XMLHttpRequest();
state.onload = function () {
document.getElementById("container")
.innerHTML = state.getAllResponseHeaders();
}
state.open("GET", "gfgInfo.txt", true);
state.send();
}
</script>
</body>
</html>
|
Output:
XMLHttpRequest object properties:
- onload: It defines a callback function that will be called when the request is loaded or received.
- onreadystatechange: It also defines a callback function that will be invoked when the readyState property changes.
-
readyState: The readyState property defines the current state of the request or holds the current status of the XMLHttpRequest. There are five states of a request that are listed below.
- readyState=0: It states that the request is not initialized yet.
- readyState=1: In this state, the server connection is established and the request is settled up.
- readyState=2: This state states that the request is received by the server.
- readyState=3: This request is in a processing state at this level.
- readyState=4: The request is finished or completed at this stage and the response is ready for further use.
- responseText: It will return the data received by the request in the form of a string.
- responseXML: It will return the data received by the request in the form of XML data.
- status: It will return the status number of the request. (i.e. 200 and 404 for OK and NOT FOUND respectively)
- statusText: It will return the status text in form of a string. (i.e. OK and NOT FOUND for 200 and 404 respectively)
Example: Below example illustrates the use of XMLHttpRequest() object properties.
HTML
<!DOCTYPE html> <html>
<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>Ready states of a request in ajax.</title>
<style>
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="container">
<h1>Hey Geek,</h1>
<h3>Welcome to GeeksforGeek!</h3>
<button type="button" onclick="stateChange()">
Update Text
</button>
</div>
<script>
function stateChange() {
var state = new XMLHttpRequest();
state.onload = function () {
if (this.readyState == 4) {
document.getElementById("container").innerHTML =
this.responseText + "Status Text: "
+ this.statusText;
}
};
state.open("GET", "gfgInfo.txt", true);
state.send();
}
</script>
</body>
</html>
|
Output: