AJAX Primer Ejercicio - paso a paso Vamos a empezar con una serie de tutoriales sobre AJAX con ejemplos prácticos, menos este que es el típico “Hola Mundo”. Antes de nada es necesario que conozcáis algo sobre AJAX y nada mejor que la lista que os pasamos hace tiempo: Recursos AJAX para principiantes. Siempre que se empieza con alguna clase de tutorial se pone el ejemplo de “Hola Mundo”, y nosotros no vamos a ser menos. 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 porqueIE7 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: SENA – ADSI Instructor: Ing. Espec. Javier V. Página 1 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); } 1. Lo primero que tenemos es la instancia del objeto XMLHttpRequest, 2. 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. 3. 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). 4. Y terminamos enviando algo (en este caso null) al servidor, porque aunque en este caso 5. funcionalmente no sería necesario, si no se envía nada, no funciona el proceso. 6. Ya 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"); ?> SENA – ADSI Instructor: Ing. Espec. Javier V. Página 2 Ejemplo 2_AJAX <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> SENA – ADSI Instructor: Ing. Espec. Javier V. Página 3 <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&iacute; aparecer&aacute; texto</p> </div> </body> </html> A continuación escribiremos en un archivo de texto la siguiente línea: Datos.txt Este texto apareció usando AJAX y sin un refresh a la pagina. Explicación. 1. 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. 2. Luego está la creación de una función pedirDatos que tiene como parámetros 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. Nota: El archivo datos.txt va en la directorio donde va ejemplo1.html. SENA – ADSI Instructor: Ing. Espec. Javier V. Página 4