«Hola mundo» en Ajax
Siempre que se empieza con alguna clase de tutorial se pone el ejemplo de 'Hola mundo', y nosotros también lo utilizaremos para nuestro ejercicio en Ajax.
Lo primero que hay que hacer es ser capaces de usar un método para obtener el objeto XMLHttpRequest, supongo que hay varias formas de hacerlo, pero la que más me gusta es la siguiente:
function ajaxobj() { try { _ajaxobj = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { _ajaxobj = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { _ajaxobj = false; } } if (!_ajaxobj && typeof XMLHttpRequest!='undefined') { _ajaxobj = new XMLHttpRequest(); } return _ajaxobj; }
Debido a que aún no se trata de un estándar, aunque esperamos que sea dentro de poco, según sea el navegador que se usa, se obtiene el objeto de distintas maneras.
Primero se intenta obtener mediante la creación de un objeto ActiveX, que es la forma que se usa para Internet Explorer, hasta dentro de poco porque IE7 lo va a traer de forma nativa. La siguiente manera es instanciándolo directamente, que se usa en otros navegadores como Firefox.
Ya sabemos cómo obtener el objeto XMLHttpRequest, ahora nos falta llamar al script php usando este objeto. En nuestro caso será pulsando un botón, realizará una llamada al script y devolverá el resultado.
<input type="button" onclick="holaMundo()" value="Hola mundo" />
La llamada al script se realizará mediante la siguiente función:
function holaMundo () { // Instanciamos el objecto XMLHttpRequest ajax = ajaxobj(); // Abrimos la conexión al script ajax.open("GET", "holamundo.php", true); // Indicamos que función vigila el cambio de estado ajax.onreadystatechange=function() { if (ajax.readyState == 4) { // Mostramos resultado alert(ajax.responseText); } } // Enviamos algo para que funcione el proceso ajax.send(null); }
Lo primero que tenemos es la instancia del objeto XMLHttpRequest, una vez obtenida, abrimos la conexión a la URL (en este caso con holamundo.php) mediante el método GET (siendo posibles también los métodos POST, HEAD o DELETE) e indicando que se trata de una conexión asíncrona.
Cuando ya hemos abierto la conexión decimos qué función se va a encargar de tratar el cambio de estado de la conexión, en este caso se trata de una función anónima que mostrará respuesta en modo texto cuando el estado indique se ha completado la carga (readyState == 4).
Y finalizamos enviando algo (en este caso null) al servidor, porque aunque en este caso funcionalmente no sería necesario, si no se envía nada, no funciona el proceso. Ahora solo nos falta el script PHP, que es un simple texto, con una fecha, para ver como se modifica en cada llamada.
<?php echo "Hola, son las ".date("H:i:s"); ?>
Tenéis un ejemplo del Hola Mundo y también puedes descargar el código fuente.
no me dan ganas de aprender que es eso de ajax, tan solo leo activex y que el propio articulo lo dice
“no es algo estandar”
activex de microsoft busca convertirse en algo estandar ??????????
por muy potente herramienta que use google hasta que no sea tan popular de ver muchos portales como con php o java no me convence
Yo veo interesante el uso que le dan al SEH en javascript, de hecho no sabía que hubiese una implementacion de SEH para ese lenguaje interpretado.
Pensaba que solo existía para lenguajes de alto nivel como C y Pascal.
Qué es donde lo he usado…
pero bueeh.
Buen ejemplo de Ajax aunque se me hace conocido ;-]
un saludo.
// http://internetmillonario.blogspot.com //
muy bueno para los que quieren empezar un poco con AJAX, la verdad la opcion de poder hacer llamadas a scripts del lado del servidor por medio de Javascript y asi evitar un refrescamiento total de la página es algo sumamente ventajoso… ojala los desarrolladores web se centraran mucho más en la utilización de este recurso tan ventajoso.
// http://fdeleon.wordpress.com //
Creo que con el apoyo que le ha dado google con su Ajax Toolkit, vamos a empezar a ver más uso de ajax en muchos sitios web. Está de moda, es práctico para el usuario, ahorra ancho de banda y simplifica la navegación, así que hay que aprovecharlo.
muy bueno como introduccion a ajax, sin embargo, particularmente, me gustaria que fuera mas extenso, y que tratara el punto de responseXML , debido a que ahi esta la parte de XML de la que habla AJAX
Yo creo que a veces es mejor centrarse en entender cómo funciona algo para luego ir avanzando poco a poco. Claro, que te doy la razón en que a algunos nos gusta leer más sobre el tema de un solo golpe.
// http://sentidoweb.com //
Buen articulo. Habra que seguir con la labor de difusion
Por cierto que Luis tiene bastante material sobre ajax en Sentidoweb.com para los que quieran profundizar en el tema 😉
Y también tenemos aquí el foro de Ajax, así que investiguen un poco, lean mucho y no olviden compartir las cosas interesantes que aprendan.
Yo quisiera aprender AJAX pero si es importante que los ejemplos sean crossbrowser, no es cierto que AJAX requiera ActiveX, esa solo es la “Microsoft way” (interprétese el way…).
// http://romerogt.delaermita.com/blog //
segun http://es.wikipedia.org/wiki/AJAX
con esta tecnica se hace trabajar mas al procesador del visitante, aligerando al servidor, lo que podria ser contraproducente cuando los visitantes tienen poca capacidad de memoria o espacio de proceso.
Con esto del AJAX, las cosas para el desarrollo de aplicaciones en web se hacen mas faciles y rapidas.
RomeroGt, el ejemplo es para todos los navegadores, a la hora de crear el objecto “ajax”, mira si se puede hacer con ActiveX (IE) y si no es así, lo hará mediante la llamada al objeto XMLHttpRequest.
FernanDoylet, es cierto que si el cliente no tiene una buena máquina, pues puede irle lento todo, pero tambien es cierto que si hay muchas peticiones, el problema no está en el cliente, sino en el desarrollador. A parte, ahora las máquinas aguantan fácilmente, si tienes algo tipo emule o messenger, etc… el AJAX no va a ser peor que ello, todo lo contrario.
Saludos
// http://sentidoweb.com //
Les recuerdo: no abusar del AJAX y solo usarlo en los casos que sean estrictamente necesarios.
// http://rstudios.efectivomusic.com/ //
Muy bueno les informo despues de un día de busqueda aprendi hacer mi primer ajax
Muchas Gracias por el Articulo, la verdad llevaba casi quice dias tratando de hacer algo AJAX, todo el mundo dice que es, pero no como se hace. Articulo Valioso
javascript!! mmmmmm…..q
javascript!! mmmmmm…..qué locura!
Por fin un ejemplo que me sirvió, gracias.
Me imagino que para newbies el consejo es: Aprende Javascript, XML, PHP y un mundo sobre web antes de poder hacer el “Hola Mundo” del Ajax. 😀
Yo creo que deberían probar. Es una mezcla de tecnologías super útil para crear alternativas en HTML de lo que se puede hacer con Flash respecto de contenidos dinámicos.
Estoy de acuerdo contigo FernanDoylet. Es verdad que al usar Ajax cargamos más al cliente, pero creo que el aumento no es como para alarmarse. En definitiva el código PHP seguirá ejecutándose en servidor sólo que será invocado desde el cliente sin tener que refrescar la página. Creo que donde aumenta un poco más la carga es cuando trabajemos en el diseño de la página utilizando javascript.
Saludos.
Por favor, necesito que alguien me diga donde puedo descargar el GWT de Google porque no puedo descargarlo desde el sitio de ellos por problemas de limitaciones de país, soy de Cuba.
Como para empezar está chevere!
Tengo unos dias leyendo acerca de ajax por recomendacion de un profesor, y por fin encontre un codigo bien explicado y que funciona.
Bueno como siempre sucede con las cosas nuevas, ajax tiene sus detractores. Y aunque parece que no es para todo, definitivamente es la proxima gran herramineta para el desarrollo web.
[…] Zend: Integración con AJAX Hoy por hoy trabajar con AJAX es algo cotidiano, por eso como no podía ser de otra manera ZF nos facilita mucho las cosas y hace […]