Apuntes de informática

Después de la "resaca" de la nochevieja, y de felicitar el 2010 (o 1948), es hora de ponerse las pilas y empezar con algo serio.
Esta vez voy a contar como utilizar JQuery para implementar AJAX en tu página web, y de qué manera puedes solventar el mayor problema que tiene AJAX ahora mismo, que no es otro que la indexacion por parte de los buscadores como Google.

Antes de empezar voy a realizar una breve introducción a AJAX,y a comentar las ventajas y desventajas que trae, y para empezar, tengo que decir que AJAX, siglas de Asynchronous JavaScript And XML, es un conjunto de 4 tecnologías que sirve para comunicar el navegador con el servidor sin necesidad de recargar la página.
Esto nos brinda muchas oportunidades, ya que, junto con los efectos de JQuery se pueden lograr cosas sorprendentes, y además, como no hace falta recargar la página, podemos ahorrar ancho de banda, lo que reduce la carga del servidor.

No voy a entrar más en detalle, para más información puedes acceder a la Wikipedia, o buscar en Google, pero ahora vamos a implementarlo.

Funciones AJAX de JQuery

JQuery ya viene con AJAX de serie, y tiene multitud de funciones muy simples que se encargan de realizar toda la labor "chunga", pero de momento con la función load(), de momento , nos vale.

El funcionamiento es muy sencillo, aunque se puede complicar más para realizar peticiones mas complejas, no es necesario, y para ellas recurriremos a la función ajax().

Load()

Espero que no te importe estimado navegante, que para explicar la función utilice el código de mi web para ganar dinero, ya que es un código que de momento funciona, y puedes ver en cualquier momento.

La solución al problema de los buscadores es "sencilla" pero laboriosa, ya que se trata de realizar la página sin AJAX y de manera que funcione, y después introducir el atributo rel en donde pondremos la url que queramos llamar para cargar, de manera que los navegadores que no tienen Javascript (como los rastreadores de Google) puedan navegar por la página, y así también, si alguien abre algún enlace en una pestaña nueva, se cargará correctamente.

Para la función load() voy a usar de ejemplo el calendario que hay en Sinpasta, ya que funciona tanto por AJAX como sin el, y su funcionamiento es muy sencillo.
Antes de poner el código HTML, tengo que decir que hay un fichero, llamado ajax.php que simplemente recibe por parámetro una url de un archivo, y lo incluye, lo uso para evitar tener líos con las rutas relativas, y que es el que se encarga de llamar a calendar.php, que es el que genera toda la vista HTML del calendario.

El código HTML de los enlaces que hacen que el calendario cambie la vista del mes es el siguiente:

Como puedes observar, el atributo href hace referencia a un archivo distinto que el atributo rel, a continuación pongo el Javascript necesario para que funcione con AJAX

Acabo de caer en que no he explicado livequery, y es un plugin realmente importante, así que voy a explicarlo ahora, de momento, del código anterior sólamente fijate en las líneas que hay dentro de function.
En la primera puedes ver el funcionamiento de load, que lo único que hace es pedir al servidor el fichero que se encuentra donde especifica el atributo rel del elemento que lo ha llamado, y lo mete dentro de "#calendario .sidebarcontent".
En la segunda se devuelve false, de este modo el navegador no se dirigirá hacia donde apunta el atributo href.

Pequeña pausa para explicar LiveQuery

Si estás realizando una página web con AJAX, puede que te aya surgido el problema de que cargas una parte de la página con AJAX, y que de repente todos las acciones que tendrían que realizarse a través de JavaScript dentro de la parte que has cargado por AJAX no funcionan, eso es debido a que el JavaScript se aplica sobre la página una vez cargada, y al cargar nuevos elementos, no se les aplica el tratamiento JavaScript y por lo tanto no funciona.
Para solucionarlo tenemos el plugin LiveQuery. Se instala igual que todos, y su funcionamiento es muy simple, tan sólo tienes que llamar a la función livequery que toma dos atributos, el primero el el "disparador", en el ejemplo anterior, era click, que es como si se hubiera puesto .click(function(){, pero eso no hubiera funcionado bien. El segundo atributo es la función que se va a realizar.

ajax()

Una vez vista la función load, vamos a ver como enviar un formulario a través de AJAX, ahora con la función ajax(), valga la redundancia.
El código HTML es el que uso en Sinpasta, no lo voy a poner porque es muy largo y es un formulario normal, sólo que cada input tiene una id para acceder a él a través de los selectores de JQuery.

El código Javascript es el siguiente:

Como puedes observar, he usado livequery, ya que el formulario va dentro de una parte de la página que se carga con AJAX, lo siguiente es meter en variables los campos que rellena el navegante.
Después genero una String que será la que se pase en forma de petición POST al servidor, con la funcion ajax(), pero antes elimino todo el html que tiene el #formulario y #comentarios y los oculto.
Lo que voy a comentar ahora linea a linea es lo que hay dentro de la funcion ajax(), que es lo más interesante:

1. Lo primero que hago es definir el tipo de petición que es, en este caso, al enviar el formulario, prefiero que sea POST.
2. La url a donde ha de ir la petición, como siempre, a través de ajax.php.
3. data hace referencia a los datos que hay que pasar, en este caso la url pasada antes.
4. El datatype indica que los datos van en HTML.
5. En esta línea indico la función que quiero que se realize, pasando como parámetro la respuesta a la petición POST.
6. Cargo el HTML de la respuesta en #formulario y en #comentarios cargo todos los comentarios de esa entrada.
7. Para acabar hago que tanto #formulario como #comentarios aparezcan con un efecto fadeIn().

He quitado las comprobaciones del formulario, que el correo sea válido, que todos los campos esten completados etc... para que no sea muy largo el código.

Existen otras muchas funciones para utilizar AJAX con JQuery, entre ellas una de las que más uso yo es getJSON, pero es un poco más avanzada, y al menos para lo básico de AJAX con lo puesto aquí es suficiente. Si te interesa el tema del JSON espero poder publicar en breves una entrada hablando sólo de él, te invito a pasarte de vez en cuando, o a suscribirte al feed para estar al tanto de su publicación.

Espero que te haya gustado, y sobretodo que te haya sido útil y te haya dado ideas para mejorar tu web. Siento no haber puesto fotos, se que hacen la entrada mas amena, pero en este caso no creo que fuera necesario.