CURSO DE PHP

Tema extra: AJAX

Que es AJAX?

AJAX no es un lenguaje exactamente su nombre viene dado por el acrónimo de Asynchronous JavaScript And XML y es posiblemente la mayor novedad en cuanto a programación web en estos últimos años.

El corazón de Ajax es el objeto XMLHttpRequest que nos permite realizar una conexión al servidor y al enviarle una petición y recibir la respuesta que procesaremos en nuestro código Javascript, estamos hablando del verdadero motor de Ajax, por ejemplo gracias a este objeto podemos desde una página HTML leer datos de una web o enviar datos de un formulario sin necesidad de recargar la página.

10 razones para usar AJAX

1. Basado en los estándares abiertos2. Usabilidad3. Válido en cualquier plataforma y navegador4. Beneficia las aplicaciones web5. No es dificil su utilización6. Compatible con Flash7. Adoptado por los "gordos" de la tecnología web8. Web 2.09. Es independiente del tipo de tecnología de servidor que se utilice10. Mejora la estetica de la web

La manera más fácil para comprender realmente la funcionalidad de Ajax es ver cómo funciona una aplicación web con Ajax y cómo una sin Ajax.

Sin AjaxSe crearía una página con un formulario, cuando el usuario envia los datos del

formulario se produce una conexión a la base de datos y se muestra por pantalla la página que el servidor devuelve, todo esto hace que se recargue la página ya sea saltando a una diferente o a ella misma, el usuario debe esperar una nueva carga de página despues de cada envío.

Es lento porque debe descargar la información HTML por duplicado.

Con AjaxUtilizariamos un código Javascript que que crearía el mencionado objeto

XMLHttpRequest al enviar el formulario, esta llamada se produce de forma asincrona lo que significa que se envían los datos y no se recarga la página, una vez el servidor responde una función 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 página, la experiencia desde el punto de vista del usuario es muy satisfactoria puesto que se asemeja a la respuesta del típico software de escritorio, ya no te planteas enlazar páginas sino enviar y recibir datos en una misma página que mediante funciones evalua las diferentes respuestas.

Es bastante más rápido puesto que no tiene que descargar de nuevo el código HTML de la página de confirmación 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;}

MétodosUna vez hayamos comprendido y realizado este paso tendremos que tener en

cuenta los métodos y propiedades que nos ofrece AJAX:

abort() - Detiene la petición 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(método,URL,asíncrona,nombre,password) - Abre una conexión con esa URL mediante ese metodo (GET o POST), aplicando los valores opcionales de la derecha (ahora se explicará).send(contenido) - Envía el contenido al servidor.setRequestHeader(etiqueta,valor) - Establece el valor de una etiqueta de las cabeceras de petición.

De está lista nos detendremos en el método open que es uno de los más utilizados y el que nos permitirá utilizar la mejor característica de Ajax que es la carga de datos externos a la página sin necesidad de recargar la misma.

Método OpenEl método open prepara una conexión HTTP a través del objeto XMLHttpRequest

con un método y una URL especificados.XMLHttpRequest.open ( sMetodo, sURL [, bSincronia [, sUsuario [, sPwd ] ] ] );sMetodo es la cadena que nos indicara el tipo de conexión (GET o POST)

sURL es la url a la que realizamos la peticiónbSincronia es un campo booleano con el que podemos utilizar modo asíncrono o síncrono, si lo fijamos en "false" modo síncrono perderiamos las mejores características de AJAX, los datos sUsuario y sPwd son opcionales y sólo aplicables en caso de caída del servidor.

Al llamar a open el atributo readyState a 1, resetea los headers de envío y los devuelve atributos responseText, responseXML, status y statusText a sus valores iniciales

Propiedades

onreadystatechange - Contiene el nombre de la función que se ejecuta cada vez que el estado de la conexión cambie.readyState - Estado de la conexión, 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 - Código enviado por el servidor, del tipo 404 (documento no encotrado) o 200 (OK).statusText - Mensaje de texto enviado por el servidor junto al código (status), para el caso de código 200 contendrá “OK”.

Conocer estas propiedades y métodos 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 conjunción de tecnologías.

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)}

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 POSTfunction 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)}

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 método GET y POSTEs aconsejable elegir “GET” para aquellas peticiones en las que se soliciten pocos

datos y “POST” para aquellas en las que sea necesario enviar información, especialmente si estos datos podrían superar los 512 bytes en total, puesto que por el método “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 tecnologías 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 básica.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 podrás cambiar permisos o renombrar archivos utilizando únicamente Javascript.

3. No puedes ejecutar aplicaciones externas al navegador con Javascript.4. Javascript no puede acceder a periféricos como la impresora, el escáner ó la

cámara web.5. Javascript no puede modificar la URL que nos muestra el navegador.6. Javascript no puede tampoco modificar el histórico de páginas del

navegador, esto evita que se pudiera alterar el uso del botón atras de nuestro navegador, o el historial de URLs que nos aparece en la barra de navegación.

Las 10 mejores librerías

Esta es una lista de las 10 librerías más ú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 librerías se basan en lenguajes como javascript,php,ajax,css...

1) Moo.fx - Su principal cualidad es que es muy ligera,más bien la podríamos definir como una diminuta libreria de efectos javascript escrita con prototype.js. Es fácil de usar,rápida y nos ofrece controles para modificar atributos como Height, Width, y Opacity con un gran rendimiento.Esta tambien optimizada para que escribas el menor código posible.

2) Rico - Una librería 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 librerías

4) ColorCombos - ¿Quien no ha pensado nunca como una libreria de colores podria ahorrarnos cantidad de tiempo probando combinaciones?.Bien con esta aplicación podremos encontrarmultitud de combinaciones de colores solo seleccionas un color y se te mostraran diferentes combianaciones optimizadas.

5) script.aculo.us -Fácil 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 pequeño manual con ejemplos aqui.

6) Mochikit - Ligera y fácil de utilizar conseguiras resultados excelentes en muy poco tiempo.

7) Dynamic Drive CSS Library - Sin duda alguna podrás encontrar original y práctico código CSS tales como menus o botones que mejoraran el impacto visual de tu Web.

8) PEAR - Un framework y sistema de distribución de utilidades Php. PEAR nos ofrece complementos php agrupándolos en “Packages”.

9) DHTML Goodies - Una buena librería de scripts DHTML y AJAX.10) dojo - Conjunto de herramientas open source JavaScript con la que obtienes

resultados profesionales de manera facil y rápida.

Los 7 pecados mortales de Ajax

Por muchos desarrolladores es sabido que Ajax nos lleva a hacer aplicaciones más rápidas, eficientes y dinámicas 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 encontrarás en la lista pero ni son todos los que están ni están todos los que son.

Los 7 pecados mortales de Ajax No decir al usuario que está sucediendo es uno de los errores más repetidos

tenemos que adaptarnos a la nueva forma de pensar que requiere desarrollar en Ajax y darnos cuenta de que la carga de las páginas no se hace de la manera convencional y el navegador por lo tanto no la interpreta como tal.

No proporcionar al usuario información de la página, a menudo los usuarios tienden a copiar URLs que le pueden llegar a ser útiles en algún momento ó simplemente para enviárselas a un amigo, con AJAX debemos tener cuidado porque los cambios realizados por el usuario en el contenido de la página no se reflejan en la URL porqué no es el servidor el que está sirviendo la página sino es Javascript en la máquina cliente quién lo está generando dinámicamente, 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 característica común 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 interacción convencional entre cliente-servidor estamos

consiguiendo dos cosas; una es que conseguimos sitios mucho más dinámicos y eficientes, dos podemos llegar a centrarnos unicamente en una sector de la página descuidando el resto y estos contrastes entre sectores actualizados de la página y sectores no actualizados de la página pueden crear cierta confusión en el usuario.

Cuidado con el texto porque Ajax presente problemas con muchos de los juegos de carácteres, por eso no hay que olvidarse de codificar correctamente lo que se envía y fijar el juego de caracteres correcto en el lado del servidor.

¿Están tus usuarios familiarizados con esta tecnología?, 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 podrán dejar de ser usuarios de tu sitio.

Los 7 pecados mortales de Ajax No abuses del dinamismo de tu página hay muchos sitios que tienen una

cantidad de información difícil de captar en un breve espacio de tiempo, para este tipo de sitios debemos ser cuidadosos si vamos ir recargando el contenido de la página una y otra vez, está muy bien que nuestras páginas sean dinámicas pero sin pasarnos.

No saber que significa "asíncrono", ten en cuenta que el nombre viene dado por el acrónimo 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 información 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 máquina cliente que no ha sido notificado al servidor, por eso es recomendable que tengamos controlado que esta sucediendo en la máquina cliente en todo momento.