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 – Response
The responseText Property
The responseText property is used to return the server response as a JavaScript string, and use it accordingly:
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>
The responseXML Property
The XMLHttpRequest object consists of in-built XML parser.
The responseXML property is used to return the server response as an XML DOM object.
This property allows you to parse the response as an XML DOM object.
Example
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<p id=”demo”></p>
<script>
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
const xmlDoc = this.responseXML;
const x = xmlDoc.getElementsByTagName(“ARTIST”);
let txt = “”;
for (let i = 0; i < x.length; i++) {
txt = txt + x[i].childNodes[0].nodeValue + “<br>”;
} document.getElementById(“demo”).innerHTML = txt;
}
xhttp.open(“GET”, “cd_catalog.xml”);
xhttp.send();
</script>
</body>
</html>
Server Response Methods
Method | Description |
getResponseHeader() | Returns specific header information from the server resource |
getAllResponseHeaders() | Returns all the header information from the server resource |
The getAllResponseHeaders() Method
The getAllResponseHeaders() method returns all header information from the server response.
Example
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<p>The getAllResponseHeaders() function returns all the header information of a resource, like length, server-type, content-type, last-modified, etc:</p>
<p id=”demo”></p>
<script>
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById(“demo”).innerHTML =
this.getAllResponseHeaders();
}
xhttp.open(“GET”, “ajax_info.txt”);
xhttp.send();
</script>
</body>
</html>
The getResponseHeader() Method
The getResponseHeader() method is used to return specific header information from the server response.
Example
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
p>The getResponseHeader() function is used to return specific header information from a resource, like length, server-type, content-type, last-modified, etc:</p>
<p>Last modified: <span id=”demo”></span></p>
<script>
const xhttp=new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById(“demo”).innerHTML =
this.getResponseHeader(“Last-Modified”);
}
xhttp.open(“GET”, “ajax_info.txt”);
xhttp.send();
</script>
</body>
</html>