php+ajax
DESCRIPTION
Pequeña presentación sobre el uso de Ajax desde PHPTRANSCRIPT
PHP y AJAX: Aplicaciones Web Activas
Víctor BledaVíctor Bleda
Dpto. O.E.I.Univ. Politécnica de Madrid
AJAX: Asynchronous JavaScript and XML Conjunto de técnicas de desarrollo web que
desde el cliente interactúan con el servidor en segundo plano o asíncrono para crear aplicaciones web interactivas
Antecedentes: Objetos iframe (1996) y layer (1997) Remote Scripting (Microsoft - 1998) Applets Java, Frames ocultos, plug-ins XMLHttpRequest (2002) Término AJAX (2005)
AJAX: Tecnologías
XHTMLXHTML y CSSCSS (hojas de estilo) para el diseño de la presentación
DOM DOM (Document Object Model) para mostrar e interactuar con los datos presentados
XMLXML y XSLTXSLT (o JSON) para el intercambio, manejo y presentación de los datos con el servidor
XMLHttpRequestXMLHttpRequest para el intercambio asíncrono con el servidor
JavaScript JavaScript (o VBScript) para unir todas las tecnologías anteriores
AJAX: Usos
Validación de formulariosValidación de formularios en tiempo realen tiempo real Códigos de autocompletadoCódigos de autocompletado Carga de páginas en Carga de páginas en backgroundbackground Interfaces de usuario más complicados Interfaces de usuario más complicados
(menús, calendarios, editores,…) Validaciones parciales de páginaValidaciones parciales de página MashupsMashups (aplicaciones de terceros: Google) Desarrollo de Páginas como Aplicaciones Desarrollo de Páginas como Aplicaciones
(Portlets) Servicio de datos en tiempo real Servicio de datos en tiempo real (Comet)
AJAX: Desventajas
Indexación desde los motores de búsqueda
-> Mostrar el contenido de otras formas Depende de JavaScript (habilitado)
-> Interfaz diferente para PDAs, móviles,.. Uso de Marcadores de Página
-> Uso del identificador de fragmento (#) Acceso al Historial de Navegación
-> Uso de iFrames para anclar la porción (#)
AJAX: Uso desde PHP
Librería Prototype.js Librería Prototype.js (Sam Stephenson)
Framework basado en JavaScript
http://www.prototypejs.org/http://www.prototypejs.org/ Sajax Sajax (Simple Ajax Toolkit)
http://www.modernmethod.com/sajax/http://www.modernmethod.com/sajax/ Xajax Xajax (Biblioteca de código abierto)
Open source y altamente compatible
http://xajaxproject.org …
AJAX: Ejemplo Simple Prototype //Ejemplo1.html
<html><script xsrc="prototype.js" type="text/javascript"></script><script>
var opt = {// función a llamar cuando reciba la respuestaonSuccess: function(t) {
dato = eval(t.responseText);alert(dato);}
}new Ajax.Request(‘Ejemplo1.php', opt);
</script><body><h1>Prueba de AJAX!</h1></body></html>//Ejemplo1.php"Hola! Soy un mensaje que viajó por AJAX/JSON!"
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 respuestaonSuccess: function(t) {
datos = eval(t.responseText);procesar(datos); } }
new Ajax.Request('datos.php', opciones); } function procesar(datos) {
contenedor = document.getElementById("lista"); //divtexto = "";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>
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);
?>