Este documento describe las tecnologías AJAX y cómo se pueden usar para crear aplicaciones web interactivas. Explica brevemente la historia de AJAX y las tecnologías subyacentes como JavaScript, XML y XMLHttpRequest. Luego detalla algunos usos comunes de AJAX como la validación en tiempo real, carga de páginas en segundo plano y interfaces de usuario más complejas. Finalmente, proporciona ejemplos prácticos de cómo implementar AJAX con PHP y la biblioteca Prototype.js para recuperar y mostrar datos de una base de datos MySQL de forma así
1. PHP y AJAX: Aplicaciones Web Activas Víctor Bleda Dpto. O.E.I. Univ. Politécnica de Madrid
2.
3.
4.
5.
6.
7.
8. AJAX: Ejemplo MySQL y Prototype (I) //Ajax.html <html><script xsrc="prototype.js" type="text/javascript"></script> <script> function HicieronClick() { var opciones = { // función para recibir la respuesta onSuccess: function(t) { datos = eval(t.responseText); procesar(datos); } } new Ajax.Request('datos.php', opciones); } function procesar(datos) { contenedor = document.getElementById("lista"); //div texto = ""; for (var i=0; i < datos.length; i++) { dato = datos[i]; texto += "Dato "+i+" - campo1:"+dato.campo1+" campo2:"+dato.campo2+”"; } contenedor.innerHTML = texto; } </script> <body> <h1>Prueba de AJAX!</h1> <div id="Boton" onClick="HicieronClick()">Haz click sobre este texto para llenar la lista</div> <div id=lista> En este div se van a mostrar los datos que se reciben por AJAX. </div> </body></html>
9. AJAX: Ejemplo MySQL y Prototype (II) // datos.php <? $link = mysql_connect('localhost', 'root', ''); mysql_select_db('mi_base'); $query = 'SELECT campo1, campo2 FROM mi_tabla'; $result = mysql_query($query); $datos = array(); //lleno el array $datos con el resultado de la consulta a MySQL: while ($line = mysql_fetch_array($result)) { $datos[]=$line; } print json_encode($datos); mysql_free_result($result); mysql_close($link); ?>
Editor's Notes
Dpto O.E.I. - U.P.M. (c) 2006 - Javier Gil y Jorge Tejedor
Dpto O.E.I. - U.P.M. (c) 2006 - Javier Gil y Jorge Tejedor
Dpto O.E.I. - U.P.M. (c) 2006 - Javier Gil y Jorge Tejedor