PHP+Ajax

1.435 visualizaciones

Publicado el

Pequeña presentación sobre el uso de Ajax desde PHP

Publicado en: Entretenimiento y humor
0 comentarios
1 recomendación
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
1.435
En SlideShare
0
De insertados
0
Número de insertados
3
Acciones
Compartido
0
Descargas
34
Comentarios
0
Recomendaciones
1
Insertados 0
No insertados

No hay notas en la diapositiva.
  • 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
  • PHP+Ajax

    1. 1. PHP y AJAX: Aplicaciones Web Activas Víctor Bleda Dpto. O.E.I. Univ. Politécnica de Madrid
    2. 2. AJAX: Asynchronous JavaScript and XML <ul><li>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 </li></ul><ul><li>Antecedentes: </li></ul><ul><ul><li>Objetos iframe (1996) y layer (1997) </li></ul></ul><ul><ul><li>Remote Scripting (Microsoft - 1998) </li></ul></ul><ul><ul><li>Applets Java, Frames ocultos, plug-ins </li></ul></ul><ul><ul><li>XMLHttpRequest (2002) </li></ul></ul><ul><ul><li>Término AJAX (2005) </li></ul></ul>
    3. 3. AJAX: Tecnologías <ul><li>XHTML y CSS (hojas de estilo) para el diseño de la presentación </li></ul><ul><li>DOM (Document Object Model) para mostrar e interactuar con los datos presentados </li></ul><ul><li>XML y XSLT (o JSON) para el intercambio, manejo y presentación de los datos con el servidor </li></ul><ul><li>XMLHttpRequest para el intercambio asíncrono con el servidor </li></ul><ul><li>JavaScript (o VBScript) para unir todas las tecnologías anteriores </li></ul>
    4. 4. AJAX: Usos <ul><li>Validación de formularios en tiempo real </li></ul><ul><li>Códigos de autocompletado </li></ul><ul><li>Carga de páginas en background </li></ul><ul><li>Interfaces de usuario más complicados (menús, calendarios, editores,…) </li></ul><ul><li>Validaciones parciales de página </li></ul><ul><li>Mashups (aplicaciones de terceros: Google) </li></ul><ul><li>Desarrollo de Páginas como Aplicaciones ( Portlets ) </li></ul><ul><li>Servicio de datos en tiempo real ( Comet ) </li></ul>
    5. 5. AJAX: Desventajas <ul><li>Indexación desde los motores de búsqueda </li></ul><ul><li>-> Mostrar el contenido de otras formas </li></ul><ul><li>Depende de JavaScript (habilitado) </li></ul><ul><li>-> Interfaz diferente para PDAs, móviles,.. </li></ul><ul><li>Uso de Marcadores de Página </li></ul><ul><li>-> Uso del identificador de fragmento (#) </li></ul><ul><li>Acceso al Historial de Navegación </li></ul><ul><li>-> Uso de iFrames para anclar la porción (#) </li></ul>
    6. 6. AJAX: Uso desde PHP <ul><li>Librería Prototype.js (Sam Stephenson) </li></ul><ul><li>Framework basado en JavaScript </li></ul><ul><li>http://www.prototypejs.org/ </li></ul><ul><li>Sajax (Simple Ajax Toolkit) </li></ul><ul><li>http://www.modernmethod.com/sajax/ </li></ul><ul><li>Xajax (Biblioteca de código abierto) </li></ul><ul><li>Open source y altamente compatible </li></ul><ul><li>http ://xajaxproject.org </li></ul><ul><li>… </li></ul>
    7. 7. AJAX: Ejemplo Simple Prototype <ul><li>//Ejemplo1.html </li></ul><ul><li><html> <script xsrc=&quot;prototype.js&quot; type=&quot;text/javascript&quot;></script> <script> var opt = { // función a llamar cuando reciba la respuesta onSuccess: function(t) { dato = eval(t.responseText); alert(dato); } } new Ajax.Request(‘Ejemplo1.php', opt); </script> <body> </li></ul><ul><li><h1>Prueba de AJAX!</h1> </body></html> //Ejemplo1.php </li></ul><ul><li>&quot;Hola! Soy un mensaje que viajó por AJAX/JSON!&quot; </li></ul>
    8. 8. AJAX: Ejemplo MySQL y Prototype (I) //Ajax.html <html><script xsrc=&quot;prototype.js&quot; type=&quot;text/javascript&quot;></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(&quot;lista&quot;); //div texto = &quot;&quot;; for (var i=0; i < datos.length; i++) { dato = datos[i]; texto += &quot;Dato &quot;+i+&quot; - campo1:&quot;+dato.campo1+&quot; campo2:&quot;+dato.campo2+”&quot;; } contenedor.innerHTML = texto; } </script> <body> <h1>Prueba de AJAX!</h1> <div id=&quot;Boton&quot; onClick=&quot;HicieronClick()&quot;>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. 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); ?>

    ×