Respuesta del servidor AJAX XMLHttpRequest

Tabla de contenido

Propiedades de respuesta del servidor

responseText: obtener los datos de respuesta como una cadena
responseXML: obtener los datos de respuesta como datos XML

La propiedad de texto de respuesta

La propiedad responseText devuelve la respuesta del servidor como un Cadena de JavaScript, y puedes usarla en consecuencia:

Ejemplo

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

Pruébelo usted mismo →

<!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>

La propiedad ResponseXML

El objeto XMLHttpRequest tiene un analizador XML incorporado.

La propiedad responseXML devuelve la respuesta del servidor como un objeto XML DOM.

Usando esta propiedad puedes analizar la respuesta como un objeto XML DOM:

Ejemplo

Solicite el archivo cd_catalog.xml y analice la respuesta:

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();

Pruébelo usted mismo →

<!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>

Métodos de respuesta del servidor

getResponseHeader(): Devuelve información de encabezado específica del recurso del servidor.
getAllResponseHeaders(): Devuelve toda la información del encabezado del recurso del servidor.

El método getAllResponseHeaders()

El método getAllResponseHeaders() devuelve toda la información del encabezado de la respuesta del servidor.

Ejemplo

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

Pruébelo usted mismo →

<!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>

El método getResponseHeader()

El método getResponseHeader() devuelve información de encabezado específica de la respuesta del servidor.

Ejemplo

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

Pruébelo usted mismo →

<!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>