Permitir la cancelación de peticiones asíncronas AJAX

Una de las ventajas de AJAX, aparte de la posibilidad de simular interfaces de usuario tradicionales de una sola capa, es que sirve para lanzar desde el cliente tareas pesadas en el servidor mientras permitimos seguir trabajando a los usuarios en e la lado cliente (navegador). Pero ¿qué pasa si una tarea tarda demasiado y queremos permitir que nuestros usuarios la cancelen cuando quieran sin tener que esperar a que terminen?


ASP.NET AJAX en sus extensiones de JavaScript contempla esta posibilidad de manera sencilla y nos proporciona una forma de conseguirlo con muy poco código.


Por ejemplo, arrastra en un formulario Web un ScriptManager y un UpdatePanel. Dentro de éste último coloca una etiqueta y un botón. En el manejador del evento de pulsación del botón detén el hilo de ejecución durante unos segundos para simular una tarea que tarda mucho tiempo en ejecutarse y despues pon algo en la etiqueta para manifestar que se ha terminado la operación. Finalmente añade un control UpdateProgress para mostrar un gráfico animado mientras se está esperando a que regrese la llamada asíncrona originada en el UpdatePanel. El resultado se parecerá a esto:



Además en esta imagen he colocado una simple etiqueta <A> de enlace que, al ser pulsada, servirá para cancelar la operación. ¿Cómo lo conseguimos?


Muy sencillo: definimos este método de JavaScript:



El truco está en obtener una referencia a la actual instancia del objeto PageRequestManager definido por las extensiones de cliente de ASP.NET AJAX. Éste es el que encapsula la funcionalidad del objeto XmlHttpRequest, en el que se basan las peticiones AJAX. Dicha clase posee un método llamado abortPostBack() que sirve para lo que su nombre indica: cancelar una petición de PostBack hecha con esta clase. Además el objeto mantiene un estado para indicar si se encuentra actualmente en medio de una operación de llamada asíncrona, por lo que podemos comprobarlo antes de cancelar algo que no existe, como se ve en el código.


Ahora lo único que queda es, en el evento onclick del enlace, llamar al método anterior, así:


<a href=»#» onclick=»return CancelarAjax();»>Cancelar operación</a>


¡Listo!


En este archivo tienes el ejemplo descrito por si quieres reproducirlo en tu equipo.

Sin categoría

5 thoughts on “Permitir la cancelación de peticiones asíncronas AJAX

  1. José M., dejo el siguiente artículo del mismo tema, que fue expuesto en MSDN Magazine por Dino Esposito. En un traer información u otro proceso, no hay problema en cancelar el request, pero si se está enviando información a la base de datos?, o realizando otra modificación o transacción?, en el artículo de Dino hay más detalles sobre este tema.

    Saludos,

  2. Hola Sergio:

    Te has olvidado de poner el enlace. Una pena porque seguro que es interesante.

    Está claro que hacer esto de esta manera puede tener algún problema según lo que hagas en el servidor y cómo gestiones la cancelación en elcódigo de servidor, pero bueno, esto es un post de un blog no un artículo completo 🙂

    Saludos

    JM

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *