AJAX - XMLHttpRequest Object
- Previous Page AJAX Introduction
- Next Page AJAX Request
The XMLHttpRequest object is the cornerstone of AJAX.
- Create XMLHttpRequest object
- Define callback function
- Open the XMLHttpRequest object
- Send requests to the server
XMLHttpRequest object
All modern browsers support XMLHttpRequest object.
The XMLHttpRequest object can be used to exchange data with the web server in the background. This means that part of the web page can be updated without reloading the entire page.
Create XMLHttpRequest object
All modern browsers (Chrome, Firefox, IE, Edge, Safari, Opera) have built-in XMLHttpRequest object.
Syntax for creating an XMLHttpRequest object:
variable = new XMLHttpRequest();
Define callback function
A callback function is a function that is passed as a parameter to another function.
In this case, the callback function should contain the code to be executed when the response is ready.
xhttp.onload = function() {
// What to do when the response is ready
}
Send request
To send a request to the server, you can use the XMLHttpRequest object's open() and send() Method:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Example
// Create XMLHttpRequest object
const xhttp = new XMLHttpRequest();
// Define callback function
xhttp.onload = function() {
// You can use data here
}
// Send request
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Cross-domain access (Access Across Domains)
For security reasons, modern browsers do not allow cross-domain access.
This means that the web page and the XML file it tries to load must be on the same server.
The examples on CodeW3C.com open XML files located in the CodeW3C.com domain.
If you want to use the above example on one of your web pages, the XML file you load must be located on your own server.
XMLHttpRequest object methods
| Method | Description |
|---|---|
| new XMLHttpRequest() | Create a new XMLHttpRequest object. |
| abort() | Cancel the current request. |
| getAllResponseHeaders() | Return header information. |
| getResponseHeader() | Return specific header information. |
| open(method, url, async, user, psw) |
Specify the request.
|
| send() | Send a request to the server, used for GET requests. |
| send(string) | Send a request to the server, used for POST requests. |
| setRequestHeader() | Add a label/value pair to the headers to be sent. |
XMLHttpRequest object properties
| Property | Description |
|---|---|
| onload | Define the function to be called when a (loading) request is received. |
| onreadystatechange | Define the function to be called when the readyState attribute changes. |
| readyState |
Saves the XMLHttpRequest status.
|
| responseText | Returns the response data as a string. |
| responseXML | Returns the response data in XML format. |
| status |
Returns the status code of the request
For a complete list, please visit HTTP Message Reference Manual |
| statusText | Returns the status text (such as "OK" or "Not Found") |
onload property
When using the XMLHttpRequest object, you can define a callback function to be executed when the response is received.
Please define the function in the XMLHttpRequest object: onload The function is defined in the property:
Example
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Multiple callback functions
If there are multiple AJAX tasks on the website, a function to execute the XMLHttpRequest object should be created, and a callback function should be created for each AJAX task.
The function call should include the URL and the function to be called 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) {
// This is the action
}
function myFunction2(xhttp) {
// This is the action
}
onreadystatechange property
readyState Property saves the status of XMLHttpRequest.
onreadystatechange Property defines a callback function that is executed when the readyState changes.
status Properties and statusText Property saves the status of the XMLHttpRequest object.
| Property | Description |
|---|---|
| onreadystatechange | Defines the function to be called when the readyState property changes. |
| readyState |
Saves the XMLHttpRequest status.
|
| status |
Returns the status code of the request
For a complete list, please visit HTTP Message Reference Manual |
| statusText | statusText |
Returns the status text (such as "OK" or "Not Found").
The onreadystatechange function is called each time the readyState changes. 4 and status is 200 When the response is ready:
Example
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();
}
The onreadystatechange event is triggered four times (1-4), and the readyState changes each time.
- Previous Page AJAX Introduction
- Next Page AJAX Request
