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
Grax
http://www.cosim-ti.com
http://www.cosimhost.com -> alojamiento web
En cuanto a ese mensaje del navegador... ¿qué navegador usas? Porque no recuerdo tener problemas de este tipo con nigun navegador, pues los códigos que desarrollo los pruebo antes, en Mozilla, Firefox, Netscape, Opera y IE, así que me extraña ese mensaje. Yo creo que no se debe a ajax, es mas, estoy seguro.
Entonces prueba los enlaces que te doy y me avisas... Saludos
Tengo un par de cuestiones, ojalá y pudieras echarme la mano. La primera, es que copié y pegué el code que aquí pones para desplegar datos simples y simplemente no corre. Por mas que presiono el botón no me puede desplegar el texto del txt.
Al momento de abrir la página, el navegador me manda una Advertencia de Seguridad diciendo que "Si lo permite, el contenido activo como secuencias de comandos y controles ActiveX puede ser útil, pero también puede dañar el equipo".
¿Tiene este mensaje algo que ver con la ejecución de la página?
¿Cómo puedo hacer que no me aparezca este mensaje cada vez que corro una página usando Ajax?
Gracias de antemano y saludos
Dejar un comentario