«Hola mundo» en Ajax

18.05.2006

«Hola mundo» en Ajax

Por Luis Sacristán | 12,503 Lecturas
Archivado 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.

Califica esta nota:

(5 votos, promedio: 2.2 de 5)

Loading ...

Sobre el autor

Luis Sacristán
Editor de Sentido Web, un sitio con noticias y ejemplos muy bien explicados sobre desarrollo web que es parte de Blogs Media.

Comentarios

23 comentarios en total.

php.java.jsp 21.05.2006 - 00:51 - #

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
NightDark 21.05.2006 - 14:18 - #

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 //
-JF- 22.05.2006 - 00:32 - #

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 //
cvander 22.05.2006 - 19:47 - #

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.
Jesus 23.05.2006 - 08:56 - #

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
Luis 24.05.2006 - 01:30 - #

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 //
Mickel 24.05.2006 - 21:12 - #

Buen articulo. Habra que seguir con la labor de difusion
cvander 26.05.2006 - 15:26 - #

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.
RomeroGt 29.05.2006 - 13:08 - #

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 //
FernanDoylet 30.05.2006 - 11:42 - #

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.
Gildus 30.05.2006 - 21:53 - #

Con esto del AJAX, las cosas para el desarrollo de aplicaciones en web se hacen mas faciles y rapidas.
Luis 31.05.2006 - 04:35 - #

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 //
Ramon Torres 10.06.2006 - 09:53 - #

Les recuerdo: no abusar del AJAX y solo usarlo en los casos que sean estrictamente necesarios.

// http://rstudios.efectivomusic.com/ //
jose 21.06.2006 - 14:56 - #

Muy bueno les informo despues de un día de busqueda aprendi hacer mi primer ajax
Omar Molinares 07.07.2006 - 20:40 - #

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
Ber 08.09.2006 - 11:36 - #

javascript!! mmmmmm…..q
Ber 08.09.2006 - 11:36 - #

javascript!! mmmmmm…..qué locura!
Wilbert 15.09.2006 - 15:18 - #

Por fin un ejemplo que me sirvió, gracias.
fearlex 18.10.2006 - 12:16 - #

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.
Cristián Villagra 14.12.2006 - 09:41 - #

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.
Manuel 25.08.2007 - 08:47 - #

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.
Primosegundo 27.11.2007 - 09:44 - #

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.
Lulú 27.06.2008 - 09:13 - #

Como para empezar está chevere!