bugl
bugl
HomeLearnPatternsPathsSearch
HomeLearnPatternsPathsSearch

Loading lesson path

Learn/JavaScript/Objects, Classes, and Advanced Patterns
JavaScript•Objects, Classes, and Advanced Patterns

AJAX - Server Response

Flash cards

Review the key moves

1/4
Core idea

What is the main idea behind AJAX - Server Response?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

___.getElementById("demo").innerHTML = xhttp.responseText;
3Order

Put the learning moves in the order that makes the concept easiest to apply.

The responseXML Property
The responseText Property
Server Response Properties

Server Response Properties

PropertyDescription
responseTextget the response data as a string
responseXMLget the response data as XML data

The responseText Property

The responseText property returns the server response as a JavaScript string, and you can use it accordingly:

Example

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

The responseXML Property

The XMLHttpRequest object has an in-built XML parser.

The responseXML property returns the server response as an XML DOM object.

Using this property you can parse the response as an XML DOM object:

Example

const xmlDoc = xhttp.responseXML;
const x = xmlDoc.getElementsByTagName("ARTIST");
let txt = "";
for (let i = 0; i < x.length; i++) {
  txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
xhttp.open("GET", "cd_catalog.xml");
xhttp.send();

Server Response Methods

MethodDescription
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

const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.getAllResponseHeaders();
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

The getResponseHeader() Method

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

Example

const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.getResponseHeader("Last-Modified");
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

Previous

AJAX - XMLHttpRequest

Next

AJAX XML Example