Retrorock » AJAX

Detecta un request Ajax con PHP

wilburhimself — Wed, 07 Jul 2010 15:34:49 +0000

Me gusta usar un solo script para los request AJAX y los request “normales” porque resulta en un solo archivo para actualizar y editar.

Tener la capacidad de detectar que tipo de request recibimos es útil para determinar que tipo de contenido devolver en la respuesta. Por ejemplo, si es un request AJAX podríamos querer devolver un JSON o un XML y si no lo es, podríamos devolver un HTML.

Una manera de detectar los request AJAX contrario a los requests que hacen un page-load full puede ser con el siguiente código PHP:

$_SERVER['HTTP_X_REQUESTED_WITH'] es la clave para verificar si es request fue hecho con AJAX o no, pero no todos los servidores proveen esta variable, así que tener otras pruebas adicionales sería importante.

Javascript y AJAX para SEO

Javascript y AJAX para SEO

wilburhimself — Sat, 12 Jul 2008 07:07:57 +0000

Javascript y AJAX nos brindan la capacidad de hacer aplicaciones web dinámicas, que no tienen que cargar una pagina completa para mostrar un fragmento de información, sino que simulan una carga inmediata, lo que significa menos carga para el servidor, menos ancho de banda e información más accesible.

Hoy en día, los diseñadores web están tan enfocados trabajando en sus aplicaciones web dinámicas que se olvidan de que la mayoría del tráfico es proveniente de los buscadores, que pasan mucho trabajo, o no pueden indexar los enlaces hechos con AJAX.

En otras palabras, muchas de tus páginas en AJAX están escondidas para los buscadores. Para completar el problema, la mayoría de los websites en AJAX tienen un solo link, el buscador tiene menos páginas que indexar.

La idea es optimizar nuestros sitios para que el javascript no haga que nuestros links no sean indexados. Aquí hay una pequeña guía para crear u optimizar un website con Javascript/AJAX que sea totalmente amigable con Google.

Diseña tu websites usando Javascript Degradable, de forma que el website sea totalmente navegable para un visitante sin Javascript y para otro con Javascript.

Cuando tengas un website navegable completamente sin Javascript, entonces puedes comenzar a incluir las partes de AJAX en algunos lugares.

Es bueno ir revisando el desarrollo del diseño en un browser de texto, como Lynx o SEO Browser

Detecta si los objetos existen, o si es un browser con capacidad de ejecutar Javascript, para que solo sirvas AJAX a quienes pueden usarlo.

Aparte de esos pasos es de suma importancia enviar un sitemap completo del website. El sitemap solo no es suficiente, todo el conjunto es necesario para que funcione perfectamente.

De esta forma es posible utilizar Javascript y AJAX en nuestros websites de forma que sean accesibles y que sean visibles para los buscadores.

jQuery 101 (introducción)

wilburhimself — Thu, 10 Apr 2008 04:53:45 +0000

jQuery es una librería que nos ayuda a simplificar la programación en javascript y AJAX. A diferencia de otras librerías de javascript, jQuery nos permite expresar un código muy complejo de la forma más sencilla y corta posible.

La metodología es simple: Encuentra cosas, y actúa sobre ellas. Encontramos los elementos con el objeto jQuery $(), que funciona básicamente como document.getElementById, excepto que no solo soporta ids sino también selectores de CSS y xPath, en vez de retornar solo un elemento, puede retornar un array de elementos.

Aquí una pequeña muestra del impacto que jQuery puede tener en tu código. Para una tarea sencilla como añadir un evento al click en los links de una región en una página, usarías javascript y métodos del DOM asi:

Con jQuery vamos directo al punto y nos ahorramos tener que hacer un loop sobre todos los elementos, no hay necesidad de usar múltiples métodos del DOM, solo con un pequeño string tenemos lo que necesitamos.

Cuando este listo … $(document).ready()

Es lo primero que hay que aprender de jQuery. Si quieres que un evento funcione en la página hay que llamarlo dentro de $(document).ready(), todo lo que este dentro de esta llamada, será ejecutado justo cuando el DOM este listo y antes de que el contenido de la página se cargue.

La ventaja de $(document).ready() es que se pueden tener tantos llamados a este método como sea necesario, aparte de que se ejecuta antes de que el contenido de la página este disponible, permitiendo que una cantidad de efectos de esconder, mostrar y otros, estén listas inmediatamente cuando el usuario ve por primera vez los elementos de la página.

Añadiendo contenido

Con jQuery tenemos acceso de forma pragmática al Dom, navegar el documento, tomar y modificar los atributos de los elementos y podemos quitar e insertar contenido.

Este fragmento aparte de mostrar la facilidad para insertar contenido al DOM, un efecto fadeIn, y aplicarle un estilo CSS al nuevo elemento, es un ejemplo de otra de las ventajas de jQuery, el encadenamiento de los llamados a los métodos.

Cada vez que se llama un método de jQuery, esta retorna el mismo objecto jQuery, lo que nos permite volverlo a utilizar sin tener que repetir el selector.

Efectos

jQuery cuenta con un grupo importante de efectos como show(“speed”), hide(“speed”), fadeIn(), fadeOut(), slideUp(), slideDown(), aparte de algunos efectos que sirven para cambiar el estado visible o invisible de un elemento dependiendo de su estado actual toggle().

Cuando son llamados sin el parametro de velocidad los metodos show() y hide(), muestran o esconden inmediatamente el elemento en cuestion. Todos el resto de este grupo de metodos llamados sin parametro de velocidad, usan la velocidad por defecto 400ms.

… Despues de jQuery …

Solo hé tratado una minúscula introducción sobre lo que es posible con jQuery. jQuery es divertido, porque siempre se aprenden nuevos trucos que resultan increíblemente naturales. jQuery simplifica tu código javascript desde la primera vez que lo usas, cada vez que aprendes algo tu código es un poco más simple.

Algunos links importantes: