«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.
Loading ...
Luis Sacristán para 
