AJAX Response

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>