AJAX - Server processing the response

This XMLHttpRequest object allows you to define functions to be executed to handle the response.

The response function onreadystatechange is defined in the properties of the XMLHttpRequest object.

httpRequest.onreadystatechange = function() {
　　if (this.readyState ===　4　&& this.status ===　200) {
　document.getElementById("output").innerHTML = this.responseText;
　　}
};

The onreadystatechange property defines the function to be executed when the readyState changes.

The readyState property saves the state of the XMLHttpRequest object.

The status property saves the status code of the XMLHttpRequest object.

The statusText property saves the status text of the XMLHttpRequest object.

Server response attributes

The following table lists the server response attributes:

responseText property

The responseText property returns the server response as a JavaScript string.

document.getElementById("output").innerHTML = httpRequest.responseText;

responseXML property

The responseXML property returns the server response as an XMLDocument object.

You can use JavaScript DOM functions to traverse the XMLDocument object.

The following example request fileajax_test.xmlAnd parse the response:

xmlDoc = httpRequest.responseXML;
tag = xmlDoc.getElementsByTagName("author");
for (let i = 0; i < tag.length; i++) {
　　　　txt　+= tag[i].childNodes[0].nodeValue　+　"<br>";
}
httpRequest.open("GET", "ajax_test.xml", true);
httpRequest.send();

Server Response Methods

The following table lists the server response methods:

getAllResponseHeaders() method

The getAllResponseHeaders() method returns all header information from the server response.

var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
　　if (this.readyState ===　4　&& this.status ===　200) {
　　　　　document.getElementById("output").innerHTML = this.getAllResponseHeaders();
　　}
};

getResponseHeader() method

The getResponseHeader() method returns specific header information from the server response.

var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
　　if (this.readyState ===　4　&& this.status ===　200) {
　　　　　document.getElementById("output").innerHTML = this.getResponseHeader("Server");
　　}
};

Multiple AJAX Tasks

If there are multiple AJAX tasks on a website, two functions should be created:

• A function to execute the XMLHttpRequest object

• Each AJAX task has a callback function

The function call should include the URL and the function to be called when the response is ready.

fetchDoc("url-1", myFunc1);
fetchDoc("url-2", myFunc2);
fetchDoc("url-3", myFunc3);
function fetchDoc(url, callback) {
　　var httpRequest = new XMLHttpRequest();
　　httpRequest.onreadystatechange = function() {
　　　if (this.readyState ===　4　&& this.status ===　200) {
　　　　　　　　callback(this);
　　　　}
　　};
　　httpRequest.open("GET", url, true);
　　httpRequest.send();
}
function myFunc1(httpRequest) {
　　//　action goes here
}
function myFunc2(httpRequest) {
　　//　action goes here
}
function myFunc3(httpRequest) {
　　//　action goes here
}

A callback function is a function passed as an argument to another function.