AJAX - onreadystatechangeEvento

Evento onreadystatechange

Cuando la solicitud se envía al servidor, necesitamos realizar algunas tareas basadas en la respuesta.

Cada vez que readyState cambia, se activa el evento onreadystatechange.

La propiedad readyState contiene la información de estado de XMLHttpRequest.

A continuación se presentan tres propiedades importantes del objeto XMLHttpRequest:

Propiedad Descripción
onreadystatechange Almacena la función (o nombre de función) que se llamará cada vez que cambie la propiedad readyState.
readyState

Contiene el estado de XMLHttpRequest. Cambia de 0 a 4.

  • 0: Solicitud no inicializada
  • 1: Conexión con el servidor establecida
  • 2: Solicitud recibida
  • 3: Procesando la solicitud
  • 4: Solicitud completada y respuesta lista
status 200: "OK"
404: Página no encontrada

En el evento onreadystatechange, especificamos la tarea que se ejecutará cuando la respuesta del servidor esté lista para ser procesada.

Cuando readyState es igual a 4 y el estado es 200, significa que la respuesta está lista:

Ejemplo

xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }

Pruébalo »

Nota:El evento onreadystatechange se activa 4 veces (0-4), respectivamente: 0-1, 1-2, 2-3, 3-4, correspondientes a cada cambio de readyState.

Usar funciones de devolución de llamada (callback)

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, entonces debería escribir unafunción estándarpara crear el objeto XMLHttpRequest, y llamar a esa función para cada tarea AJAX.

La llamada a esta función debe incluir la URL y la tarea a ejecutar cuando ocurra el evento onreadystatechange (la cual puede variar en cada llamada):

Ejemplo

function myFunction() { loadXMLDoc("/try/ajax/ajax_info.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); }

Pruébalo »
Otras extensiones