JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
AJAX XMLhttp
All modern browsers support the XMLHttpRequest object.
The XMLHttpRequest object exchanges data with a web server behind the scenes. This refers to the possibility of updating parts of a web page, without reloading the whole page.
Create an XMLHttpRequest Object
All modern browsers (Chrome, Firefox, IE, Edge, Safari, Opera) have a built-in XMLHttpRequest object.
Syntax for creating an XMLHttpRequest object:
variable = new XMLHttpRequest();
Define a Callback Function
A callback function is a function passed as a parameter to another function.
In this case, the callback function must consist of the code to execute when the response is ready.
xhttp.onload = function() {
// What to do when the response is ready
}
Send a Request
To send a request to a server, use the open() and send() methods of the XMLHttpRequest object:
xhttp.open(“GET”, “ajax_info.txt”);
xhttp.send();
Example
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<div id=”demo”>
<p>Let AJAX change this text.</p>
<button type=”button” onclick=”loadDoc()”>Change Content</button>
</div>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() { document.getElementById(“demo”).innerHTML = this.responseText;
}
xhttp.open(“GET”, “ajax_info.txt”);
xhttp.send();
}
</script>
</body>
</html>
Access Across Domains
For security reasons, modern browsers do not allow access across domains.
This means that both the web page and the XML file it tries to load, must be located on the same server.
The examples on W3Schools all open XML files located on the W3Schools domain.
Use the example above on one of your web pages, the XML files you load must be located on your server.
XMLHttpRequest Object Methods
Method | Description |
new XMLHttpRequest() | Creates a new XMLHttpRequest object |
abort() | Cancels the current request |
getAllResponseHeaders() | Returns header information |
getResponseHeader() | Returns specific header information |
open(method, URL, async, user, psw) | Specifies the request |
send() | Sends the request to the server |
send(string) | Sends the request to the server. |
setRequestHeader() | Adds a label/value pair to the header to be sent |
XMLHttpRequest Object Properties
Property | Description |
onload | Defines a function to be called when the request is recieved (loaded) |
onreadystatechange | Defines a function to be called when the readyState property changes |
readyState | Holds the status of the XMLHttpRequest. |
responseText | Returns the response data as a string |
responseXML | Returns the response data as XML data |
status | Returns the status-number of a request |
statusText | Returns the status-text (e.g. “OK” or “Not Found”) |
The onload Property
With the XMLHttpRequest object, dsefine a callback function to be executed when the request receives an answer.
The function is specified in the onload property of the XMLHttpRequest object:
Example
<!DOCTYPE html>
<html>
<body>
<div id=”demo”>
<h2>The XMLHttpRequest Object</h2>
<button type=”button” onclick=”loadDoc()”>Change Content</button>
</div>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById(“demo”).innerHTML =
this.responseText;
}
xhttp.open(“GET”, “ajax_info.txt”);
xhttp.send();
}
</script>
</body>
</html>
Multiple Callback Functions
If you have more than one AJAX task on a website, you should create one function for executing the XMLHttpRequest object, and one callback function for each AJAX task.
The function call should contain the URL and what function to call when the response is ready.
Example
loadDoc(“url-1”, myFunction1);
loadDoc(“url-2”, myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open(“GET”, url);
xhttp.send();
}
function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
The onreadystatechange Property
The readyState property has the status of the XMLHttpRequest.
The onreadystatechange property specifies a callback function to be executed when the readyState changes.
The status property and the statusText properties have the status of the XMLHttpRequest object.
Property | Description |
onreadystatechange | Defines a function to be called when the readyState property changes |
readyState | Holds the status of the XMLHttpRequest. |
status | 200: “OK” |
statusText | Returns the status text (e.g. “OK” or “Not Found”) |
The onreadystatechange function is called the readyState changes.
When readyState is 4 and status is 200, the response is ready:
Example
<!DOCTYPE html>
<html>
<body>
<div id=”demo”>
<h2>The XMLHttpRequest Object</h2>
<button type=”button” onclick=”loadDoc()”>Change Content</button>
</div>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“demo”).innerHTML =
this.responseText;
}
};
xhttp.open(“GET”, “ajax_info.txt”);
xhttp.send();
}
</script>
</body>
</html>