CURSO DE PHP

Tema extra: AJAX

Que es AJAX?
AJAX no es un lenguaje exactamente su nombre viene dado por el acrnimo de Asynchronous JavaScript And XML y es posiblemente la mayor novedad en cuanto a programacin web en estos ltimos aos. El corazn de Ajax es el objeto XMLHttpRequest que nos permite realizar una conexin al servidor y al enviarle una peticin y recibir la respuesta que procesaremos en nuestro cdigo Javascript, estamos hablando del verdadero motor de Ajax, por ejemplo gracias a este objeto podemos desde una pgina HTML leer datos de una web o enviar datos de un formulario sin necesidad de recargar la pgina.

10 razones para usar AJAX

1. Basado en los estndares abiertos 2. Usabilidad 3. Vlido en cualquier plataforma y navegador 4. Beneficia las aplicaciones web 5. No es dificil su utilizacin 6. Compatible con Flash 7. Adoptado por los "gordos" de la tecnologa web 8. Web 2.0 9. Es independiente del tipo de tecnologa de servidor que se utilice 10. Mejora la estetica de la web

La manera ms fcil para comprender realmente la funcionalidad de Ajax es ver cmo funciona una aplicacin web con Ajax y cmo una sin Ajax. Sin Ajax Se creara una pgina con un formulario, cuando el usuario envia los datos del formulario se produce una conexin a la base de datos y se muestra por pantalla la pgina que el servidor devuelve, todo esto hace que se recargue la pgina ya sea saltando a una diferente o a ella misma, el usuario debe esperar una nueva carga de pgina despues de cada envo. Es lento porque debe descargar la informacin HTML por duplicado.

Con Ajax Utilizariamos un cdigo Javascript que que creara el mencionado objeto XMLHttpRequest al enviar el formulario, esta llamada se produce de forma asincrona lo que significa que se envan los datos y no se recarga la pgina, una vez el servidor responde una funcin Javascript es la que valora la respuesta del servidor, si esta respuesta es la deseada imprimiremos el texto que indique al usuario que sus datos fueron enviados correctamente. El navegador no recarga la pgina, la experiencia desde el punto de vista del usuario es muy satisfactoria puesto que se asemeja a la respuesta del tpico software de escritorio, ya no te planteas enlazar pginas sino enviar y recibir datos en una misma pgina que mediante funciones evalua las diferentes respuestas. Es bastante ms rpido puesto que no tiene que descargar de nuevo el cdigo HTML de la pgina de confirmacin del formulario.

Ejemplo objeto XMLHttpRequest (AJAX)

En primer lugar crearemos nuestro objeto ActiveX en IExplorer y un objeto nativo en el resto de navegadores que lo soportan, y es por ello que tendremos que ver qu objeto creamos, controlandolo con diferentes condiciones, con esto conseguimos que el navegador cree una instancia del objeto apropiado, dependiendo del navegador usado por el usuario. function nuevoAjax(){ var xmlhttp=false; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } } if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp = new XMLHttpRequest(); } return xmlhttp; }

Mtodos
Una vez hayamos comprendido y realizado este paso tendremos que tener en cuenta los mtodos y propiedades que nos ofrece AJAX:
abort() - Detiene la peticin en curso. getAllResponseHeaders() - Devuelve todas las cabeceras de la respuesta (etiquetas y valores) como una cadena. getResponseHeader(etiqueta) - Devuelve el valor de la etiqueta en las cabecerasde la respuesta. open(mtodo,URL,asncrona,nombre,password) - Abre una conexin con esa URL mediante ese metodo (GET o POST), aplicando los valores opcionales de la derecha (ahora se explicar). send(contenido) - Enva el contenido al servidor. setRequestHeader(etiqueta,valor) - Establece el valor de una etiqueta de las cabeceras de peticin. De est lista nos detendremos en el mtodo open que es uno de los ms utilizados y el que nos permitir utilizar la mejor caracterstica de Ajax que es la carga de datos externos a la pgina sin necesidad de recargar la misma.

Mtodo Open El mtodo open prepara una conexin HTTP a travs del objeto XMLHttpRequest con un mtodo y una URL especificados. XMLHttpRequest.open ( sMetodo, sURL [, bSincronia [, sUsuario [, sPwd ] ] ] ); sMetodo es la cadena que nos indicara el tipo de conexin (GET o POST) sURL es la url a la que realizamos la peticin bSincronia es un campo booleano con el que podemos utilizar modo asncrono o sncrono, si lo fijamos en "false" modo sncrono perderiamos las mejores caractersticas de AJAX, los datos sUsuario y sPwd son opcionales y slo aplicables en caso de cada del servidor. Al llamar a open el atributo readyState a 1, resetea los headers de envo y los devuelve atributos responseText, responseXML, status y statusText a sus valores iniciales

Propiedades
onreadystatechange - Contiene el nombre de la funcin que se ejecuta cada vez que el estado de la conexin cambie. readyState - Estado de la conexin, puede valer desde 0 (no iniciada) hasta 4 (completado). responseText - Datos devueltos por el servidor en formato cadena. responseXML - Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc). status - Cdigo enviado por el servidor, del tipo 404 (documento no encotrado) o 200 (OK). statusText - Mensaje de texto enviado por el servidor junto al cdigo (status), para el caso de cdigo 200 contendr OK. Conocer estas propiedades y mtodos es algo muy til a la hora de desarrollar aplicaciones utilizando Ajax debido a la gran ayuda que muchas de ellas ofrecen a la hora de depurar errores. Y nos da una mayor idea acerca de la potencia de esta conjuncin de tecnologas.

Ejemplo con Metodo GET

function cargarContenido(){ var t1, t2, contenedor; contenedor = document.getElementById('contenedor'); t1 = document.getElementById('texto1').value; t2 = document.getElementById('texto2').value; ajax=nuevoAjax(); ajax.open("GET", "ejemploajax2.php?t1="+t1+"&t2="+t2,true); ajax.onreadystatechange=function() { if (ajax.readyState==4) { contenedor.innerHTML = ajax.responseText } } ajax.send(null) }

Ejemplo con Metodo POST

function cargarContenido(){ var t1, t2, contenedor; contenedor = document.getElementById('contenedor'); t1 = document.getElementById('texto1').value; t2 = document.getElementById('texto2').value; ajax=nuevoAjax(); ajax.open("POST", "ejemploajax2.php",true); ajax.onreadystatechange=function() { if (ajax.readyState==4) { contenedor.innerHTML = ajax.responseText } } ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.send("t1="+t1+"&t2="+t2) }

Diferencia entre el mtodo GET y POST Es aconsejable elegir GET para aquellas peticiones en las que se soliciten pocos datos y POST para aquellas en las que sea necesario enviar informacin, especialmente si estos datos podran superar los 512 bytes en total, puesto que por el mtodo GET no podremos recibir la totalidad de los datos.

Cosas que no puedes hacer con Javascript

Siempre hemos hablado de que podemos hacer con las diferentes tecnologas web que solemos utilizar (php,javascript,html,css), pero a veces lo que no tenemos claro es qu no podemos hacer... En este caso vamos a ver qu no podemos hacer con Javascript: 1. Javascript no puede acceder a los archivos alojados en el ordenador del usuario, es una medida de seguridad bsica. 2. Javascript tampoco puede acceder a archivos remotos, esto implica que no puedes acceder a archivos alojados en el servidor, puedes acceder a contenido via HTTP pero no podrs cambiar permisos o renombrar archivos utilizando nicamente Javascript. 3. No puedes ejecutar aplicaciones externas al navegador con Javascript. 4. Javascript no puede acceder a perifricos como la impresora, el escner la cmara web. 5. Javascript no puede modificar la URL que nos muestra el navegador. 6. Javascript no puede tampoco modificar el histrico de pginas del navegador, esto evita que se pudiera alterar el uso del botn atras de nuestro navegador, o el historial de URLs que nos aparece en la barra de navegacin.

Las 10 mejores libreras

Esta es una lista de las 10 libreras ms tiles que he encontrado y que utilizo a menudo, es una manera sencilla de utilizar la ltimas tecnologias con un ahorro de tiempo considerable y resultados excelentes. Estas libreras se basan en lenguajes como javascript,php,ajax,css... 1) Moo.fx - Su principal cualidad es que es muy ligera,ms bien la podramos definir como una diminuta libreria de efectos javascript escrita con prototype.js. Es fcil de usar,rpida y nos ofrece controles para modificar atributos como Height, Width, y Opacity con un gran rendimiento.Esta tambien optimizada para que escribas el menor cdigo posible. 2) Rico - Una librera de uso abierto en JavaScript para crear aplicaciones amigables. Utiliza tecnologia Ajax, manejo de drag and drop , y otros muchos efectos. 3) Swat - Desarrollada por silverorange, Swat es un conjunto de herramientas open source para aplicaciones web escrito en PHP.

Las 10 mejores libreras

4) ColorCombos - Quien no ha pensado nunca como una libreria de colores podria ahorrarnos cantidad de tiempo probando combinaciones?.Bien con esta aplicacin podremos encontrarmultitud de combinaciones de colores solo seleccionas un color y se te mostraran diferentes combianaciones optimizadas. 5) script.aculo.us -Fcil de utilizar, compatible y potente ademas de proveerte de herrrammientas que dan a tu web un estilo Web 2.0, personalmente es mi favorita.Puedes ver un pequeo manual con ejemplos aqui. 6) Mochikit - Ligera y fcil de utilizar conseguiras resultados excelentes en muy poco tiempo. 7) Dynamic Drive CSS Library - Sin duda alguna podrs encontrar original y prctico cdigo CSS tales como menus o botones que mejoraran el impacto visual de tu Web. 8) PEAR - Un framework y sistema de distribucin de utilidades Php. PEAR nos ofrece complementos php agrupndolos en Packages. 9) DHTML Goodies - Una buena librera de scripts DHTML y AJAX. 10) dojo - Conjunto de herramientas open source JavaScript con la que obtienes resultados profesionales de manera facil y rpida.

Los 7 pecados mortales de Ajax

Por muchos desarrolladores es sabido que Ajax nos lleva a hacer aplicaciones ms rpidas, eficientes y dinmicas pero hay una serie de trampas en las que no debemos caer a la hora de utilizar Ajax. No debe importarte lo comunes que puedan llegar a parecer estos errores, porque es bueno aprender de los errores ya conocidos... podemos llamar a estos errores "los pecados mortales de Ajax", hay muchos que no encontrars en la lista pero ni son todos los que estn ni estn todos los que son.

Los 7 pecados mortales de Ajax

No decir al usuario que est sucediendo es uno de los errores ms repetidos tenemos que adaptarnos a la nueva forma de pensar que requiere desarrollar en Ajax y darnos cuenta de que la carga de las pginas no se hace de la manera convencional y el navegador por lo tanto no la interpreta como tal. No proporcionar al usuario informacin de la pgina, a menudo los usuarios tienden a copiar URLs que le pueden llegar a ser tiles en algn momento simplemente para envirselas a un amigo, con AJAX debemos tener cuidado porque los cambios realizados por el usuario en el contenido de la pgina no se reflejan en la URL porqu no es el servidor el que est sirviendo la pgina sino es Javascript en la mquina cliente quin lo est generando dinmicamente, por ello deberiamos ofrecer al usuario la URL de manera manual para poder llegar a ella en un futuro sin necesidad de repetir una y otra vez los mismo pasos, recuerda que esta es una caracterstica comn a todas las grandes webs y no debemos descuidarlas porque es una buena forma de hacer "Marketing Viral".

Los 7 pecados mortales de Ajax

Al romper la interaccin convencional entre cliente-servidor estamos consiguiendo dos cosas; una es que conseguimos sitios mucho ms dinmicos y eficientes, dos podemos llegar a centrarnos unicamente en una sector de la pgina descuidando el resto y estos contrastes entre sectores actualizados de la pgina y sectores no actualizados de la pgina pueden crear cierta confusin en el usuario. Cuidado con el texto porque Ajax presente problemas con muchos de los juegos de carcteres, por eso no hay que olvidarse de codificar correctamente lo que se enva y fijar el juego de caracteres correcto en el lado del servidor. Estn tus usuarios familiarizados con esta tecnologa?, es importante saber que a hay navegadores que no tienen Javascript habilitado y por lo tanto debes de ser consciente de que probablemente estos usuarios y aquellos que no se terminen de familiarizar con esta nueva manera de navegar podrn dejar de ser usuarios de tu sitio.

Los 7 pecados mortales de Ajax

No abuses del dinamismo de tu pgina hay muchos sitios que tienen una cantidad de informacin difcil de captar en un breve espacio de tiempo, para este tipo de sitios debemos ser cuidadosos si vamos ir recargando el contenido de la pgina una y otra vez, est muy bien que nuestras pginas sean dinmicas pero sin pasarnos. No saber que significa "asncrono", ten en cuenta que el nombre viene dado por el acrnimo de Asynchronous JavaScript And XML ,las habituales aplicaciones web del lado servidor este registra y sabe exactamente que es lo que le ha llegado al cliente porqu es el servidor el que practicamente se encarga de imprimir la informacin por pantalla, pero con Ajax no es asi las cosas van sucediendo independientemente del servidor por lo que puede llegar un momento en que ocurra un error en la mquina cliente que no ha sido notificado al servidor, por eso es recomendable que tengamos controlado que esta sucediendo en la mquina cliente en todo momento.