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.
En resumen lo que haremos es hacer uso del objeto XMLHttpRequest, para consultas asíncronas para cargar contenidos sin refrescar la pagina.
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.
Nota: El archivo datos.txt va en la directorio donde va ejemplo1.html.
Puedes ver el ejemplo en la sección ejemplos
Quizá te pueda interesar: CRUD con PHP, MySQL y jQuery.
queria darte las gracias por publicar tus aplicaciones en ajax ya que me an servido de mucho para entender ajax ya que por una jodida onda de un profe nos dijo que desarrollesmos una aplicacion en ajax y yo en mi vida abia escuchado de ajax en fin .
Hola, antes que nada gracias por la serie de publicaciones sobre Ajax. Habia estaod buscando por la red y estos que has posteado se me han hecho los mejores.
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
Hola Miguel, que bueno que los ejemplos te hayan gustado. Sobre el código de este ejemplo, ‘quizas’ falta algun caracter y por ello no corre. Prueba descargando el ejemplo en este enlace o viendo el resultado.
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
creo que es mucho codigo para algo tan siemple, seria mejor hacer ese ejemplo con frames
http://www.cosim-ti.com
http://www.cosimhost.com -> alojamiento web
Muy buen ejemplo, si me funciono 🙂
Grax
Me gusto chevre amigo ha 😀
esta muy bueno el ejemplo.
hola saven sus ejmplos son muy buenos realice el de la llamada de otra pagina para cargarla en un div por medio de ajax pero el form tiene un calendario echo en javascrip el cual no carga
he buscado en todos lado para la solucion y nada
si pudieras ayudarme
Hola excelente ejemplo lo corri y de maravilla
pues ando buscando acerca de ajax siempre escucho de el pero nunca lo he usado espero seguir viendo ejemplos tuyos gracias
Hola pues aqui probando tu ejemplo y tengo algunos problemas y dudas, espero me las soluciomes:
PROBLEMA:
1) No me sirve el programa tal cual esta escrito alli porque simplemente no aparece el texto, simplemente no lo muestra.
DUDA:
1) En la funcion llamada function() /* XMLHttpRequestObject.onreadystatechange = function() */ tienes un if el cual pide que se cumplan ciertas sentencias me gustaria saber para que quieres que se cumplan y que son:
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
en todo caso no tiene sentido el ejemplo, bueno es mas como una opinion personal, le eh quitado el ‘if’ y ahora si me a funcionado, bueno eso es todo, pero en si esta bien el ejemplo gracias.
hola probe el codigo y como Akito Hayama no funciona tal cual está aunque saqué el if :
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
funciona solo en firefox pero no en internet explorer
bueno simplemente no sirve, muchas kejas
hola que onda con lo del ejemplo de ajax, necesito saber como llenar un campo de texto automaticamente, no se si pudieras orientarme, no se nada de ajax
buenisino, me
donde debo almacenar el archivo datos.txt???? pues si lo hago correr el codigo asi como esta, no me muestra texto
Tu ejemplo funciona correctamente en IE6 hacia abajo pero del IE7 y IE8 marca un error por seguridad que es el “acceso denegado”, no se como correguirlo espero me puedas ayudar gracias de antemano
Yo estoy trabajando en Debian, con el IceWeasel(mismo FireFox) y pues corrio bien, yo reemplace el archivo .txt por un .php y corrio normal; tambien probe en IE 7 y pues cargo bien. Gracias por el aporte.
Hola una pregunta. Estoy probando en Internet Explorer 8 y nome funciona el ajax, simplemente el div (contenedor) no muestra los datos. Alguna slucion. En Firefox y Chrome va de lujo….
Yo sé algo de AJAX, cuando aparece el error en Javascript: Acceso denegado, es porque la página HTML, no se está ejecutando desde un servidor local como un Localhost o servidor Web en Internet.
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…
soy nuevo en AJAX, de hecho es mi primer ejemplo, pero no se en que ruta debe de ir el archiv, me pueden orientar un poco mas, por fa
Si sirve, a mi funciono de lujo, ademas es muy simple el ejemplo.
Yo sé algo de AJAX, cuando aparece el error en Javascript: Acceso denegado, es porque la página HTML, no se está ejecutando desde un servidor local como un Localhost o servidor Web en Internet.
Funciono…
Buen ejemplo introductorio, es genial para gente que está iniciando.
Gracias!!!
Muy buena explicación!!
si deseo elegir el dato desde una base de datos como por ejemplo la id de un empleado como haria eso
Estupendo!!
estaba buscando un ejemplo sencillo que me permitiera tener una idea de qué leche es esto del ajax y éste ha sido perfecto.
De hecho he podido cambiarlo, usar como fuente un script php que genera el texto, etc.
Muchas gracias
pero por qué no responden donde debe ir el maldito archivo de texto?..en que ruta?
si pues, da mucha colera….que les cuesta decir donde va el archivo.txt?
Muy Facil, si se fijan la ruta esta en la funcion pedirDatos, que en este caso es en la misma carpeta donde tienen ejemplo1.html.
es necesario saber al menos un poquito de html con javascript para poder entender y manipular ajax, no creo que maldecir y molestarse sea la solucion, mucho hace el pana en darnos este codigo.
Saludos