El evento onreadystatechange
Cuando una petición a un servidor se envía, queremos realizar algunas acciones sobre la base de la respuesta.
El evento onreadystatechange se dispara cada vez que cambia el readyState.
La propiedad readyState mantiene el estado de la XMLHttpRequest.
Tres importantes propiedades del objeto XMLHttpRequest:
| Propiedad | Descripción |
|---|---|
| onreadystatechange | Almacena una función (o el nombre de una función) que se llamará automáticamente cada vez que cambia la propiedad readyState |
| readyState | Ejerce en el estado de la XMLHttpRequest. Cambia de 0 a 4: 0: solicitud no inicializado 1: conexión del servidor estableció 2: solicitud recibida 3: Solicitud de procesamiento 4: solicitar acabado y la respuesta está listo |
| status | 200: "OK" 404 Pagina no encontrada |
En el caso onreadystatechange, especificamos lo que va a suceder cuando la respuesta del servidor está listo para ser procesado.
Cuando readyState es 4 y el estado es de 200, la respuesta está lista:
Ejemplo
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
Inténtalo tú mismo " Nota: El evento se dispara onreadystatechange cinco veces (0-4), una vez para cada cambio en readyState.
Utilizar una 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 usted tiene más de una tarea AJAX en su sitio web, debe crear una función estándar para crear el objeto XMLHttpRequest, y llamar a esto para cada tarea AJAX.
La llamada a la función debe contener la URL y qué hacer en onreadystatechange (que probablemente es diferente para cada llamada):
Ejemplo
function loadDoc(cFunc) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if (xhttp.readyState == 4 && xhttp.status == 200) {
cFunc(xhttp);
} Inténtalo tú mismo "