JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

AJAXInterceptor: convierte tus aplicaciones Web a AJAX sin escribir una sola línea de código

Estos días he estado trabajando unas cuantas horas de mi (poco) tiempo libre en una idea que tuve ya hace bastante tiempo. Se puede resumir con sólo una frase: crear una pequeña biblioteca JavaScript que, añadida a tu página Web (PHP, ASP, ASP.NET...) la dotará automáticamente de funcionalidad AJAX, sin que tengas que escribir ni una sola línea de código.

Pensé que iba a resultarme mucho más dificil, pero lo cierto es que ha sido bastante fácil de conseguir.

Ahora ya la puedo presentar para que el que quiera se descargue el resultado: AJAXInterceptor 0.5 Beta.

Sólo con añadir este pequeño módulo JavaScript al final de tus páginas consigues que los envíos de tus formularios se intercepten (de ahí el nombre), y en lugar de enviarse la petición al servidor de la manera normal, se hacen de manera asíncrona y en un modo suave estilo AJAX.

Dado que es una biblioteca de lado de cliente funcionará con cualquier tecnología de servidor: ASP.NET, PHP, JSP, Classic ASP... e incluso con archivos locales HTM. No obstante sólo lo he probado con aplicaciones ASP.NET y ASP 3.0 (por favor, mándame un correo si lo pruebas con otra tecnología de servidor),

He incluido extensibilidad en el módulo de modo que puedes añadir fácilmente tus propios indicadores de progreso personalizados (he incluido varios) y mostrar mensajes de error de la forma que prefieras (por defecto muestra una ventana de alerta para los errores).

La biblioteca funciona interceptando el envío de los formularios. Soporte tanto formularios enviados automáticamente (con botones de envío o la tecla 'enter'), y envíos de formularios hechos mediante código llamando al método submit(). Respeta además los posibles manejadores del evento onsubmit que hayas creado, por lo que puedes hacer la validación de formularios de la manera habitual (he buscado que sea lo más transparente posible).

Resumen de características:

• AJAXificación de aplicaciones Web sin escribir código
• Soporte de cualquier tecnología Web incluyendo ASP.NET, JSP, PHP, ASP 3.0...
• En ASP.NET soporte cualquier tipo de postback: directos y por código.
• Funciona en cualquier navegador moderno que soporte AJAX.
• Soporte el envío cruzado de formularios, es decir, puedes enviar la información a otras páginas diferentes dentro del mismo dominio. Si todas las páginas de tu sitio tienen AJAXInterceptor incluido (por ejemplo porque lo metes en una Master Page o en una plantilla) puedes tener todo el sitio AJAXificado.
• Respeta tus manejadores de evento de onsubmit.
• Soporta la historia del navegador de forma que tus usuarios pueden pulsar el botón "Atras" en el navegador y volver a la página anterior aunque la actual haya sido cargada con AJAX.
• He incluido dos versiones del módulo:
    - AJAXInterceptor.js: comentado por completo. Útil para depurar apliaciones.
    - AJAXINterceptor_r.js: versión reducida de tamaño. Se descarga más rápido ya que sólo ocupa 2.6 kB. Es mejor usar esto en aplicaciones en producción.
• Muestra y oculta automáticamente indicadores de progreso personalizados.
• Soporta la cancelación de las peticiones.
• Soporta la visualización personalizada de mensajes de error.
• Soporta cualquier formulario que haya en una página (si hay varios).

Obviamente no es un sustituto de una API potente como ASP.NET AJAX de Microsoft, PHPLiveX o AJAX.NET, pero te permitirá añadir soporte AJAX a tus aplicaciones en unos segundos y sin escribir código. ¡Dale una oportunidad y pruébalo!

En el ZIP encontrarás el módulo, un ejemplo de uso con ASP.NET y un PDF con la documentación de ayuda.

Me gustaría mucho que me escribieses en caso de que lo llegues a usar en alguna aplicación real o si lo mejoras con nuevas características. Usa el enlace "Contacto" que hay en el lateral de esta página para enviarme un e-mail.

Descargar: AJAXInterceptor 0.5 Beta (834 KB) ¡Freeware!

Actualización: Hoy (16/1/2008) he añadido el proyecto a CodePlex: http://www.codeplex.com/AJAXInterceptor. A partir de ahora las modificaciones y añadidos (de haberlos) irán apareciendo allí.

José Manuel Alarcón
Banner

Comentarios (2) -

Hola Jose Manuel,

Aunque creo que con los tiempos que corren todo el mundo debería estar ya usando un un framework de desarrollo sofisticado en el que "ajax" fuese solo una caracteristica más (atlas, gwt, richfaces, etc.), he de reconocer que ni que sea como ejercicio didáctico, el trabajo que has hecho me parece excelente.

Solamente se me ocurre una crítica... yo manejaría los eventos, en lugar de con asignaciones directas, tal y como se explica aquí: ajaxcookbook.org/event-handling-memory-leaks/

Responder

Gracias por el comentartio Marto:

En efecto, se trata sobre todo de un divertimento. Me lo he pasado muy bien haciéndolo, y me ha ayudado a desestresar un poco en esta época algo "a tope" que llevo :-)
Seguro que a más de uno le va ayudar bastante.

Respecto a lo que indicas de los eventos: en este caso no puedo hacer eso ya que (además de ser bastante más lioso) el uso de addEventListener se usa para asignar más de un manejador para un mismo evento y (como pasa también en .NET, por ejemplo) no hay forma de determinar cual de ellos se lanzará primero. En este caso es indispensable asegurar que mi evento sustituye al anterior y es el único que se lanza (el que hubiera antes se ejecuta "artifialmente") para poder así controlar el proceso del envío de datos.

Un saludo.

JM.

Responder

Agregar comentario