Bienvenidos al mundo del desarrollo web avanzado. En este artículo te presentaremos una de las técnicas más utilizadas en la actualidad, AJAX. En particular, te hablaremos de un aspecto fundamental de esta tecnología: el estado listo del XMLHttpRequest. Si deseas dar un salto cualitativo en tus proyectos web, sigue leyendo para conocer más sobre esta herramienta esencial.
En este artículo, vamos a ver el readyState propiedad con más detalle. Cuando se envía una solicitud a un servidor web, el servidor procesa la solicitud y envía datos al navegador. Antes de que el navegador actúe sobre la respuesta, debe asegurarse de que el el navegador ha terminado de recibir la respuesta desde una página válida en un servidor web.
Dependemos de la onreadystatechange evento que se desencadena cada vez que readyState cambios. El readyState propiedad contiene el estado de la XMLHttpRequest. Simplemente tenemos que comprobar el readyState valor y estado antes de tomar medidas sobre los datos recibidos.
Ejemplo HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function loadAjax() {
var xhr = false;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
}
else {
// IE5/IE6
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("div1").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "/demo/ajax_load.txt", true);
xhr.send(null);
}
}
</script>
</head>
<body>
<img id="img1" onclick="loadAjax()" src="https://www.itgeared.com/ajax-readystate-status-tutorial/go.png" /> ;
<div id="div1"> <!-- Some Content --> </div>
</body>
</html>Propiedades de XMLHTTPRequest
| Propiedad | Descripción |
|---|---|
onreadystatechange |
Función a llamar cuando el readyState cambios de propiedad |
readyState |
Mantiene el estatus de XMLHttpRequest. valores de 0 – 4 |
status |
Devuelve el número de estado. 200, 404 |
statusText |
Devuelve el texto de estado: Ok, Not Found |
ReadyState Estado
0– solicitud no inicializada1– conexión al servidor establecida2– Solicitud recibida3– solicitud de procesamiento4– solicitud completada y respuesta lista
Para asegurarnos de que no tomamos medidas sobre los datos que se reciben del servidor web hasta que se haya completado, simplemente verificamos la status del readyState propiedad cuando la onreadystatechange cambios de eventos. Cuando el readyState el valor es 4 y status el valor es 200la respuesta está lista.
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("div1").innerHTML = xhr.responseText;
}
}