AJAX - Respuesta del servidor

Atributo onreadystatechange

readyState El atributo mantiene el estado de XMLHttpRequest.

onreadystatechange El atributo define la función que se ejecuta cuando cambia el readyState.

status El atributo y statusText El atributo contiene el estado del objeto XMLHttpRequest.

Propiedad Descripción
onreadystatechange Define la función que se llama cuando cambia el atributo readyState.
readyState

Guarda el estado de XMLHttpRequest.

  • 0: La solicitud no se ha inicializado
  • 1: Se ha establecido la conexión con el servidor
  • 2: La solicitud se ha recibido
  • 3: Se está procesando la solicitud
  • 4: La solicitud se ha completado y la respuesta está lista
status
  • 200: "OK"
  • 403: "Prohibido"
  • 404: "Página no encontrada"

Para obtener una lista completa, visite Manual de mensajes HTTP
statusText devuelve el texto de estado (por ejemplo "OK" o "No encontrado")

cada vez que readyState cambia, se llama a la función onreadystatechange.

cuando readyState para 4,status para 200 cuando la respuesta esté lista:

Ejemplo

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML =
            this.responseText;
       }
    };
    xhttp.open("GET", "ajax_info.txt", true);
    xhttp.send(); 
}

Prueba personalmente

Nota:onreadystatechange se dispara cinco veces (0-4), cada vez readyState todo cambia.

Uso de la función de devolución de llamada

Una función de devolución de llamada es una función que se pasa como parámetro a otra función.

Si su sitio web tiene múltiples tareas AJAX, debe crear una función para ejecutar el objeto XMLHttpRequest y una función de devolución de llamada para cada tarea AJAX.

Esta función debe contener la URL y la función que se llama cuando la respuesta está lista.

Ejemplo

loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}
function myFunction1(xhttp) {
  // Acción aquí
 } 
function myFunction2(xhttp) {
  // Acción aquí
 }

Prueba personalmente

Propiedad de respuesta del servidor

Propiedad Descripción
Propiedad responseText Obtener datos de respuesta en forma de cadena
responseXML Obtener datos de respuesta en forma de XML

Método de respuesta del servidor

Método Descripción
getResponseHeader() Información de encabezado específica devuelta por el servidor
getAllResponseHeaders() Información de encabezado devuelta por el servidor

Propiedad responseText

Propiedad responseText La propiedad responseText devuelve la respuesta del servidor en forma de cadena de JavaScript, por lo que puedes usarla así:

Ejemplo

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

Prueba personalmente

Propiedad responseXML

El objeto XMLHttpRequest tiene un analizador XML integrado.

ResponseXML devuelta por el servidor como objeto XML DOM.

Con esta propiedad, puedes obtener la respuestaAnálisispara el objeto XML DOM:

Ejemplo

Solicitud de archivo music_list.xmly analiza la respuesta:

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

Prueba personalmente

Aprenderás más sobre XML DOM en el capítulo DOM de este tutorial.

Método getAllResponseHeaders()

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

Ejemplo

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getAllResponseHeaders();
  }
};

Prueba personalmente

Método getResponseHeader()

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

Ejemplo

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getResponseHeader("Last-Modified");
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

Prueba personalmente