Mi primer ejemplo con AJAX
Siguiendo con la publicación del tutorial sobre AJAX, mostraremos ahora un pequeño ejemplo introductorio. Mostraremos el código y luego explicaremos el código.
Código
ejemplo1.html
<html>
<head>
<title>Ejemplo1</title>
<script language = "javascript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function pedirDatos(fuenteDatos, divID){
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", fuenteDatos);
XMLHttpRequestObject.onreadystatechange = function(){
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<H1>Mostrando datos con AJAX</H1>
<form>
<input type = "button" value = "Mostrar mensaje" onclick = "pedirDatos('datos.txt','targetDiv')">
</form>
<div id="targetDiv" style="background-color:#99FF66;">
<p>Aquí aparecerá texto</p>
</div>
</body>
</html>
A continuación escribiremos en un archivo de texto la siguiente línea:
datos.txt
Este texto aparecio usando AJAX y sin un refresh a la pagina.
Explicación
En primer lugar creamos el objeto XMLHttpRequestObject para la petición de datos. Este objeto será creado dependiendo del navegador web, la primera parte del if es para la mayoría de navegadores y la parte del if else es para Internet Explorer.
Luego está la creación de una función pedirDatos que tiene como parametros fuenteDatos y divID. Está función, como su mismo nombre lo indica, será la encargada de hacer una petición de datos, a través del parámetro fuenteDatos al servidor. Y el resultado de la petición será mostrada en la variable divID , la cual es una capa de estilos que se mostrará en el html.
Como se aprecia la mayor parte del código interesante se centra en el javascript. Así que empezaremos el tutorial con un rápido repaso de este lenguaje. Hasta el próximo artículo.
Dudas, preguntas, sugerencias por favor dejar sus comentarios.
Puedes ver el ejemplo en la sección ejemplos
Comentarios
Y sobre XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200
bueno readyState es una propiedad del objeto XmlHttpRequest, es la encargada de indicar que proceso se encuentra nuestra solicitud al servidor los posibles readyStates son:
* 0 No inicializado (el método open no a sido llamado).
* 1 Cargando (se llamó al método open).
* 2 Cargado (se llamó al método send y ya tenemos la cabecera de la petición HTTP y el status).
* 3 Interactivo (la propiedad responseText tiene datos parciales).
* 4 Completado (la propiedad responseText tiene todos los datos pedidos al servidor).
Y el status es una propiedad del XmlHttpRequest que inidica en que estado se encuentra la solicitud
por ejemplo cuando no se encuentra una página el navegador nos dice Error 404 Página no encontrada, pero cuando se encuentra la página, internamente aparece el mensaje 200 página encontrada y bueno hay más aquí: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
Entonces en este código fuente se está intentando validar las repuestas de esta forma; claro es una manera.
Sin duda a este ejemplo se le puede mejorar pero ahí esta la idea inicial...
Y bueno espero poder haber ayudado a alguien...
Dejar un comentario