Seguridad en AJAX. Características Ajax

...

Las imágenes siguientes muestran el indicador animado de algunos navegadores populares

[pic 2]

El indicador de carga de Internet Explorer es un círculo sólido con un gradiente que gira mientras se carga el contenido

[pic 3]

Firefox muestra un ícono similar de pequeños círculos gira en diferentes tonos de gris.

[pic 4]

Google Chrome rueda un medio círculo.

El problema es que las peticiones Ajax no activan este indicador de carga en los navegadores.

Solución: Inserta un indicador similar cerca del contenido que está cargando

La solución común a esto es incorporar un indicador de progreso personalizado en la petición Ajax. Un número de sitios web ofrecen gratis gráficos de "carga Ajax".

Preloaders.net tiene un gran número de elegantes y personalizables gráficos animados para escoger. En esta nota te damos, además, consejos para hacer atractivos visualmente estos tiempos de carga »

La aplicación de este gráfico de carga personalizado, o indicador de progreso, en la funcionalidad Ajax de tu sitio es simplemente una cuestión de mostrarlo y ocultarlo en el momento adecuado a través de JavaScript.

Tu código de Ajax incluye líneas de código que indicará si la solicitud está en curso o ha finalizado. Utilizando JavaScript, puedes mostrar el gráfico animado mientras que la petición está siendo procesada y esconderlo cuando la acción se ha completado.

[pic 5]

Problema # 3: El usuario no sabe que una petición Ajax ha finalizado

Esto se relaciona con el problema anterior, pero a menudo es pasado por alto, debido a que el desarrollador podría suponer que la desaparición del indicador de carga es suficiente para informar al usuario que el contenido está completamente cargado. Pero en la mayoría de los casos, indicar definitivamente que el contenido se ha actualizado o renovado es lo mejor.

Solución: Utiliza un mensaje distintivo de "Solicitud completada"

Esto se puede hacer de forma similar a como se confirman los envíos de formularios. Después de que un vínculo ha sido presentado en Digg, la página te permite saber con toda claridad que su presentación se ha recibido:

[pic 6]

Aunque este indicador no señala que una petición Ajax haya terminado, el principio es el mismo: la baja de "éxito" aparece después de que la página que envía el formulario ha terminado de cargar, y la caja es de colores y distintiva.

Un gráfico similar o indicador podría utilizarse al final de una petición Ajax para indicar a los usuarios que el contenido se ha actualizado. Esto se aplicará en adición a, no en lugar de, el indicador de progreso para el problema anterior

[pic 7]

Problema # 4: Las solicitudes AJAX no pueden tener acceso a servicios web de terceros

El objeto XMLHttpRequest, que está en la raíz de todas las peticiones Ajax, se limita a hacer peticiones en el mismo dominio que la página de la petición. Pero hay casos en los que se desea tener acceso a datos de terceros a través de una petición Ajax. Muchos servicios web hacen que sus datos sean accesibles a través de una API.

Solución: usar el servidor como un proxy.

La solución a este problema es utilizar el servidor como un proxy entre el servicio de terceros y el navegador. Aunque los detalles de esta solución van mucho más allá del alcance de este artículo, vamos a repasar el principio fundamental en el trabajo.

Debido a que una petición Ajax se origina en el navegador del cliente, se debe hacer referencia a un archivo en otro lugar, pero en el mismo dominio que el origen de la petición.

Tu servidor, sin embargo, a diferencia de el navegador del cliente, no se limita de esta manera. Así que, cuando se llama a la página de tu servidor, se ejecuta en segundo plano como lo haría normalmente, pero con acceso a cualquier dominio.

Esto no presenta ningún riesgo de seguridad para el usuario debido a que las peticiones al servicio de terceros se hacen en el servidor. Así que, una vez que la información se ha obtenido a nivel de servidor, el siguiente paso en la llamada Ajax es enviar una respuesta al cliente, que en este caso incluirá los datos obtenidos del servicio de terceros web.

[pic 8]

Enlaces no disponibles

Este es un tema complicado, pero puede no ser necesario dependiendo de tu tipo de sitio web o aplicación. El problema se produce cuando el contenido se carga a través de Ajax y luego el "estado" de la página web se cambia sin que la dirección URL que apunta a esa página se vea afectada.

Si el usuario vuelve a la página a través de un marcador o comparte el vínculo con un amigo, el contenido actualizado no se mostrará de forma automática. El sitio web, en su lugar, volverá a su estado original. Los sitios web Flash solían tener el mismo problema: no permitían que los usuarios hagan enlace a otra cosa que no fuera la pantalla inicial.

Solución: Utiliza anchors de páginas internos

Para garantizar que un determinado "estado" en un sitio basado en Ajax sea enlazable y bookmarkable, puedes utilizar enlaces internos, que modifican la dirección URL, pero no recargan la página o afectan a su posición vertical.

Este código simple demuestra cómo se hace esto:

1-var currentAnchor = document.location;

2- currentAnchor = String(currentAnchor);

3-currentAnchor = currentAnchor.split("#" ) ;

4- if (currentAnchor.length> 1) {

5- currentAnchor = currentAnchor[1]; }

6-}

7- else {

8-currentAnchor = currentAnchor[0];

9- } switch(currentAnchor) {

10- case "section1":

11-case "section2":