Consejos para cuando uses Ajax

ByLuis

Ajax tiene muchos amigos debido a la Web 2.0 y muchos enemigos, sobre todo debido a la usabilidad. Al igual que dijimos con el tema de Flash, el problema no es Ajax, sino el uso que se da de él. Por eso, conocer estos consejos nos puede venir bastante bien:

  1. No actualices toda la página usando Ajax, ni modifiques elementos HTML que puedas modificar mediante Javascript y el DOM.
  2. Ten en cuenta que habrá visitantes que tengan el Javascript desactivado o usen un navegador con una version de Javascript antigua o no completa como la de los dispositivos móviles.
  3. Cachea, ya sea en el cliente o en el servidor, las peticiones más frecuentes. Por ejemplo, el autocompletado hace peticiones constantemente al servidor, lo que puede gastar recursos del servidor y la base de datos.
  4. No tengas muchas llamadas concurrentes para cambiar la interfaz, normalmente los navegadores solo realizan dos llamadas HTTP a la vez, por lo que si tienes muchas llamadas para cambiar las imágenes, puede volverse muy lenta la carga.
  5. Usa llamadas asíncronas, ya que si las realizas de forma síncrona y hay problemas de red, el navegador se quedará esperando la respuesta.
  6. Prueba tu aplicación web con una conexión lenta.
  7. Comprueba el uso de memoria del navegador mientras ejecutas tu aplicación web durante 1 ahora, 2, 10, un día.
  8. Comprueba el código de estado http que devuelve XMLHttpRequest.
  9. Prueba a desactivar el objeto XMLHttpRequest.
  10. Usa indicadores de carga para saber que la aplicación está cargando algo.
  11. Ten en cuenta que puedan usar el botón de “Atrás” del navegador.
  12. Si es necesario cancelar un petición ten en cuenta que la petición ya está procesándose en el servidor y que el cliente procesará la respuesta.

Yo añadiría que hay que tener en cuenta que el orden de llegada de las respuestas no tiene que ser el mismo que el de las peticiones, si es importante el orden, usa bloqueos pare evitar problemas de concurrencia.

The top 10 mistakes when using AJAX

Vía / dzone

Similar Posts

Ajax Solutoire: recursos Ajax

ByLuis

solutoire.pngAjax Solutoire es un listado de recursos Ajax muy extenso el cual nos puede sacar de un buen apuro.
Entre los enlaces que nos ofrece encontramos tutoriales de Javascript, de los cuales me ha gustado A (Re)-Introduction to JavaScript. También nos ofrece un listado de enlaces sobre depuración de Javascript, yo la verdad me quedo con Firebug y me olvido del resto, pero bueno, no todo el mundo tiene que tener mis preferencias. Sobre el listado de editores de Javascript debo decir que es muy pobre, si mal no creo todos están basados en Eclipse (jDeveloper también lo está si mal no creo) y todos basados en el mundo Java.
La serie de enlaces sobre tutoriales de Ajax es extensa, y a mí me gusta recomendar todo lo que sea sobre Ajax y accesibilidad, algo bastante importante y que a veces olvidamos un poco.
También aporta enlaces para las librerías más conocidas que tratan Ajax, como pueden ser Scriptaculous, Prototype y Mootols.
Un lugar que tener en nuestros favoritos.
Ajax.solutoire.com
Vía / Proletarium

|

Listas de correo con PHP y AJAX

ByLuis

En SitePoint siempre sacan algún tutorial útil y que nos puede facilitar mucho nuestros desarrollos. En este caso se trata de listas de correos, quizás con el tema de las feeds, ya no se usen mucho, pero conozco a unos cuantos que aún tiran de ellas.

A grandes rasgos se trata de lo siguiente:

  • Un HTML dentro de un PHP que recibe las direcciones de correo de los usuarios.
  • Un Javascript que leerá cada cierto tiempo el formulario y realizará una llamada AJAX al servidor con la dirección de correo introducida.
  • Un script PHP que recibe la dirección, comprueba si es correcta, la almacena en la base de datos y manda un mensaje de que todo ha ido bien o de que ha habido error a la página web para que la muestre al usuario.

Use AJAX and PHP to Build your Mailing List

|

Escritorio AJAX estilo Netvibes

ByLuis

Interesante y extenso tutorial sobre cómo realizar un escritorio AJAX del estilo Netvibes. El escritorio del ejemplo consta de una barra de accesos directos y de widgets (ventanas que muestran información).
escritorio-ajax.png

El tutorial explica varios temas distintos, que juntos hacen posible el escritorio AJAX:

AJAX Desktop Tutorial

Vía / Pixel Groovy

moo.ajax: clase javascript para usar AJAX

ByLuis

Para aquellos que conozcan moo.fx, les gustará saber, que sus autores han sacado una clase javascript para usar AJAX, funciona con prototipe.lite, la cual es proporcionada por moo.fx y su utilización es sencilla:

new ajax(url, opciones);

Las opciones vienen encerradas entre llaves y pueden ser:

  • method: método de llamada AJAX (GET o POST)
  • postBody: párametros si eliges el método POST
  • onComplete: la función que se ejecuta cuando acabe la petición
  • update: el elemento DOM o el ID del elemento que va a ser modificado para mostrar el resultado

Para aquellos que les guste moo.fx, existe también un generador mediante PHP: MooFx Generator

Vía / aNieto2K

WaveMaker: crear aplicaciones web en modo visual

ByLuis

WaveMaker Visual Ajax Studio es una aplicación que nos permite desarrollar aplicaciones web de forma visual, mediante drag&grop. Podrás unir Ajax widgets, web services y bases de datos para crear aplicaciones de forma rápida y sencilla.
wavemaker.png
Esta aplicación reduce el tiempo y el costo de desarrollo de nuevas aplicaciones de negocio. Los desarrolladores mejorarán los tiempos hasta en un 67% del tiempo y el número de líneas en un 98%, ya que creará aplicaciones war de Java.
Entre las características nos encontramos con el drag&drop, sistema de layouts, deploy, SOAP, REST, RSS y servicios web.
WaveMaker Visual Ajax Studio
Vía / WebAppers

| |

Laboratorio: no permitir que accedan directamente a las urls empleadas en Ajax

ByLuis

Cuando usamos Ajax en nuestras aplicaciones solemos usar un script específico que devuelva los datos preparados para que el cliente los interprete y los muestre.

En algunas ocasiones no suele ser de nuestro agrado que usuarios accedan directamente a las URLs empleadas para Ajax.

Para evitar esta situación se puede usar un script sencillo. Se tomará en cuenta el valor de la variable de entorno HTTP_REFERER, la cual nos devuelve desde qué página se accede a nuestro script.

$ref = getenv('HTTP_REFERER');

Si el contenido de esta variable es false entonces es que se ha accedido directamente desde el navegador, si no, es que se accede desde una página, también habrá que comprobar que la página es la que nosotros queremos.

<?php
$ref = getenv('HTTP_REFERER');
if (!$ref || $ref != '[nuestra url]') {
?>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"xhtml1-transitional.dtd">
<html>
<head>
<title>Sentido Web - Redireccionamiento Ajax</title>
</head>
<body>
<h1>Sentido Web - Redireccionamiento Ajax</h1>
<p><?php echo "Hola, son las ".date("H:i:s"); ?></p>
</body>
</html>
<?php
} else {
echo "Hola, son las ".date("H:i:s");
}
?>

En este caso mostraremos una página cuando no haya referer o no sea el que nosotros esperamos. También se podría hacer para que el referer estuviera en el servidor, pero eso lo dejo para que lo haga el que lo necesita.

Una funcionalidad parecida se podría usar por temas de accesibilidad, dependiendo de un parámetro que indique si se trata de una llamada Ajax o no, se devuelva la información para el script del cliente o se muestre la información en una página.

<a href="url-ajax.php" onclick="ajax('url-ajax.php?ajax=1')">Enlace</a>

En el caso de haber problemas de accesibilidad, el enlace accede a la página con la información. En caso contrario, ejecuta la funciona ajax(), indicándole que se trata de una llamada Ajax para que nos devuelva la información formateada, ya sea en XML o JSON o como queramos.