Para cualquier desarrollador web es vital conocer AJAX. AJAX (Asynchronous JavaScript And XML) es una técnica de programación utilizando Javascript, la cuál permite consultar y mostrar contenidos desde un repositorio sin tener que recargar la página en la que el usuario se encuentra. El repositorio puede ser cualquier elemento que permita almacenar datos para un sitio web: una base de datos, un archivo XML, un servicio web, otra página web, etc.
Bien utilizado, puede ser de inmensa utilidad para mejorar la usabilidad de un sitio web. Por ejemplo, se puede reducir significativamente el tiempo de espera para el usuario si, en lugar de utilizar links comunes para mostrar el contenido de una nueva sección del sitio, se utiliza AJAX para solamente cargar el contenido requerido. Sin embargo, hacer un uso equivocado de esta técnica puede dar al traste con el mejor de los sitios web. Veamos qué cosas no se deberían hacer al implementar AJAX en un sitio web:
1. No usar indicadores de carga
Al utilizar AJAX en un sitio web es necesario indicarle al usuario que algo está sucendiendo luego de que se haya desencadenado un evento de este tipo. Esto sucede muy frecuentemente, el usuario da click a un enlace, la sección en donde se cargará el contenido se pone en blanco, pero nada parece suceder. Lo que el usuario no sabe es que hay un evento AJAX publicando información. Para esto se debe colocar un texto o alguna imagen, normalmente un gif animado que sea claro para el usuario. En este sitio web es posible generar fácilmente una imagen que indique que se está desarrollando una carga vía AJAX.
2. Cargar más datos de los requeridos
Muy relacionado con el punto anterior: muchas veces los desarrolladores no colocan un indicador de carga debido a que los datos que se están consultando son “muy pocos”. Sin embargo muchas veces no se toma en cuenta la escalabilidad que debe tener todo sitio web: hay que preveer que la información que maneja el sitio puede crecer. De esta forma, el sitio crece y cuando el usuario ejecuta la acción de carga AJAX el tiempo de espera se incrementa, resultando en que el usuario crea que el sitio no funcionay que posiblemente abandone.
Es muy dado que se utilice AJAX para mostrar o actualizar campos de un formulario o contenidos dentro de una etiqueta table o div. Un problema común es que el desarrollador opta por volver a cargar todo el contenido, como por ejemplo cargar un campo select completo, incluso con los tags option, en lugar de traer únicamente los valores del campo. Esto es peor cuando se carga un tabla completa en vez de cargar solamente los valores que han cambiado de sus celdas. Para evitar esto, y siempre pensando en la escalabilidad, se puede utilizar el formato JSON (Javascript Object Notation), que permite obtener los datos en el formato INDICE => VALOR
3. Uso excesivo de AJAX
No se debe utilizar AJAX para todo en el sitio web. Es necesario hacer un balance y usarlo solamente donde signifique una ganacia para el usuario. Mucho AJAX puede confundir al usuario y hacer el sitio difícil de navegar. Muchas veces se intentan hacer galerías de imágenes utilizando AJAX de modo que cada imagen se cargue por demanda en vez de cargarlas de una vez al abrir la página. Pero, si la galería es muy grande o las imágenes son pesadas, se volverá tedioso para el usuario tener que esperar por cada imagen. Para este caso es mejor pensar en utilizar caché, paginación y hacer una carga secuencial de las imágenes escondiendo las que no están en primer plano mientras cargan.
4. Reemplazar URLs
Muchas veces se opta por hacer que todos los contenidos de una sección del sitio sean cargados por AJAX de modo que el usuario no tenga que estar cambiando de página para ver todos los contenidos. El problema de esto es que cada contenido pierde su url. Es decir, no hay forma de que el usuario ingrese directamente al tercer contenido por una url, si no que debe ingresar a la url principal y ejecutar cuantas cargas AJAX sean necesarias para llegar al contenido deseado. La importancia de mantener una url para los contenidos es que esto permite que los contenidos sean compartidos, y en esta época de redes sociales esto es vital.
5. Transmisiones inseguras
Al hacer una consulta AJAX se envían una serie de parámetros a un código que los recibirá, los procesará y enviará una respuesta. Es necesario que se mantenga la cantidad de parámetros en el mínimo indispensable para evitar urls de conexión muy largas que hagan el código dificil de mantener o propenso a bloqueos desde el servidor. Además, se debe preprocesar cada parametro de modo que se asegure que no se están enviando carácteres extraños que puedan dar al traste con la consulta y validando que no hayan ataques como XSS. En lo posible no se debe enviar texto como parámetro y siempre utilizar POST.
Igualmente, la respuesta desde el script que será ejecutado debe ser preprocesada de modo que no se envíen carácteres extraños que rompan la comunicación. En este punto vuelve a cobrar importancia lo que discutimos en el punto 2, utilizar JSON y retornar solamente la información que sea absolutamente indispensable.
6. No manejar excepciones
Es posible que los datos que se carguen por AJAX vengan de un servidor externo. Siempre es necesario establecer un tiempo límite de carga para las consultas AJAX, y en caso de que no exista respuesta del servidor, mostrarle un mensaje al usuario que le indique que ocurrió un problema al cargar y que lo intente de nuevo. Sería deseable que algún tipo de alerta se genere al administrador del sitio.
Ajax puede ser un increíble aliado para crear sitios web sorprendentes. Por ello, es necesario tomar las previsiones durante su desarrollo de modo que no se afecte la usabilidad ni la experiencia del usuario.
