AJAX – Server Response

AJAX engine has numerous dimensions, each of which has its own significance. Once the AJAX engine has completed sending the request and receiving the response and then it can be handled using its provided properties. You can use the “responseText” or “responseXML” AJAX properties to get a server’s response in string and XML form.

This write-up will explain the procedure to handle AJAX server response with the help of responseText and responseXML properties. So, let’s start!

AJAX – Server responseText property

While dealing with an asynchronous request, the value of the “responseText” property comprises the current response received from the server, even if it has not responded completely. This property returns the server response as a string.

Have a look at the syntax of responseText property:

document.getElementById("element_Id").innerHTML = xhttp.responseText;

Here, the “responseText” property will return the server response in the string form, which we will be then set as the content of the specified element.

Example: Using AJAX – Server responseText property
In this example, when the user will click on the added “button”, it will set server response as the content of the container defined by the <div> tag:

<div id="div1">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

In the loadDoc() function definition, firstly, we will add a “xhttp” XMLHttpRequest object:

function loadDoc() {
const xhttp = new XMLHttpRequest();

When the xhttp object will be loaded, it will write-out the response data in the <div> container:

xhttp.onload = function() {
document.getElementById("div1").innerHTML =
this.responseText;
}

The “xhttp” XMLHttpRequest Object will get the “sample.txt” file from the server which comprises the response data:

xhttp.open("GET", "sample.txt");
xhttp.send();
}

After saving the provided code, we will run our “myFile.html” with the help of the “Live Server” VS Code extension:

Clicking on the “Change Content” button will display the server response as follows:

AJAX – Server responseXML property

In case, when the response of the server is in XML format, and you have to parse it as an XML object, you can utilize the “responseXML” property.

Check out the syntax of the “responseXML” property:

var data = XMLHttpRequest.responseXML;

Here, the “data” object will store the server response.

Example: Using AJAX – Server responseXML property
In our HTML file, we will add a heading with the <h2> tag and a paragraph element with the help of “<p>” tag:

<h2>The XMLHttpRequest Object</h2>
<p id="demo"></p>

Next, we will add the below-given code in the “projectFile.js” for requesting the “cd.xml” file.

const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
const xmlDoc = this.responseXML;

Our “cd.xml” file looks like this:

After retrieving the requested data by utilizing the “responseXML” property, the server response will be parsed and its child node values will be fetched using the code written below:

const x = xmlDoc.getElementsByTagName("ARTIST");
let txt = "";
for (let i = 0; i < x.length; i++) {
txt = txt + x[i].childNodes[0].nodeValue + "<br>";
}

Lastly, the parsed data will be displayed as content of the “paragraph” element:

document.getElementById("demo").innerHTML = txt;
}
xhttp.open("GET", "cd.xml");
xhttp.send();

The above-given output signifies that we have successfully retrieved the server response by using the “responseXML” property.

Conclusion

Using responseText and responseXML properties, you can handle a request-response of an AJAX server. The responseXML property retrieves the server response in XML, whereas the responseText is utilized for getting the server response in string format. This write-up explained the procedure to handle AJAX server response with the help of responseText and responseXML properties.

AJAX – Server Response

AJAX – Server responseText property

AJAX – Server responseXML property

Conclusion

About the author

Sharqa Hameed