a |b |c |d |e |f |g |h |i |j |k |l |m |n |o |p |q |r |s |t |u |v |w |x |y |z |

AJAXInterceptor

Project Description
Just by adding this small JavaScript module to the end of your web pages, you get your form's submissions intercepted and, instead of sending request to the server in the usual way, they are done asynchronously and in an AJAX-style smooth way.

As long as it is a client-side library it will work with any server technology: ASP.NET, PHP, JSP, Classic ASP... and even with local HTM files.

I've included extensibility so that you can add easily your own progress indicators (several included) and show error messages the way you prefer (by default it shows an alert).

It's transparent to your server code and could be used to add AJAX capabilities to some applications without writting a single line of code.

Documentation is included.



Features summary

• No-code AJAXification of web apps
• Supports any server technology, including ASP.NET, JSP, PHP, ASP 3.0...
• In ASP.NET it supports all kinds of postbacks: direct and by code.
• Works in any modern browser that supports AJAX.
• Supports cross-posting of forms, that is, you can send the information to any web page in the same domain. If all your web pages have AJAXInterceptor included (for example, you include it in your master page or template) you can hace
• Respects your custom onsumit event handlers.
• Supports browser history so that your users can hit the previous button and get the last rendered page.
• Two versions of the module:
- AJAXInterceptor.js: full commented one. Useful for debugging purposes.
- AJAXINterceptor_r.js: reduced-size version. It downloads faster as it only is 2.6 kB in size. It's better to use this on production apps.
• Automatically show/hide custom progress indicators.
• Support for cancelling operations.
• Support for custom message displaying.
• Supports any form in your page

Obviously this is not substitute at all of full-fledged APIs like Microsoft's ASP.NET AJAX, PHPLiveX or AJAX.NET, but will let you add AJAX support to your apps in a few seconds and without writing any code. Just give it a try!

In the ZIP you will find teh module, a working sample with ASP.NET and a PDF with the help documentation.

This project is just for fun :-)

I will be very glad if you drop me a line in case you use AJAXInterceptor in any real-world application or if you enhance it with new features.

Visit my .NET blog (Spanish) at http://www.jasoft.organd my e-mail marketing blog (English) at http://www.theemailingexperience.com

Related javascript Articles


Spoiler Blocker When JS Isn’t Available


Ever gone to a site to read up on your favorite show or get the lowdown on a new movie only to have the whole plot spoiled because you weren't forewarned that the "whole freakin' script" was injected into the article?!?! Yeah, I've been there and it ain't fun!

Chris Coyier of CSS-Trickscame up with a solution called Fade-in Spoiler Revealer which used jQueryto allow the user to click on a div that blocked view of the spoiler and see the contents. This was a very cool technique and caught the attention of Brian Dillard. Brian wondered how this script could be adapted to work with RSS readers and mobile browsers:

My only reservation about Coyier's technique was its reliance on JavaScript, and only JavaScript, to hide spoiler-laden content. With RSS and mobile browsing on the rise, lots of people read content in user-agents without JavaScript support. Shouldn't we try to protect them, too? I commented to this effect on the original article, then realized that I should just write the code myself as proof of concept.

Brian Dillard came up with his own version of a spoiler blockerwhich, through a little progressive enhancement, accommodates for situations where JS is not enabled (eg: a RSS reader). His code consists of two parts; the jQuery code which hides the spoiler and binds the click event to a fade effect and the HTML which is progressive enhanced.

PLAIN TEXT
JAVASCRIPT:
  1. $(document).ready(function() {
  2. $ (".spoiler")
  3. //hide the spoiler
  4. . children("span.hidden").hide()
  5. //hide the whitespace inside it
  6. . children("br").hide()
  7. //step back up a level
  8. . end()
  9. //find the sibling
  10. . prev("span.message")
  11. //add the click handler to show the spoiler
  12. . click(function() {
  13. //use a callback So FX execute non-simultaneously;
  14. $ (this).fadeOut(600, function() {
  15. $ (this).next().fadeIn(600);
  16. })
  17. })
  18. ;
  19. });
PLAIN TEXT
HTML:
  1. <p class="spoiler">
  2. In the movie "Citizen Kane," Charles Foster Kane's last
  3. word, "Rosebud," turns out to be ...
  4. <span class="message">
  5. ( <a href="#answer">Click here if you'd like to be spoiled.</a>)
  6. </span>
  7. <span class="hidden">
  8. <br/ ><br/ ><br/ ><br/ ><br/ ><br/ ><br/ >
  9. <br/ ><br/ ><br/ ><br/ ><br/ ><br/ ><br/ >
  10. <br/ ><br/ ><br/ ><br/ ><br/ ><br/ ><br/ >
  11. <br/ ><br/ ><br/ ><br/ ><br/ ><br/ ><br/ >
  12. <br/ ><br/ ><br/ ><br/ ><br/ ><br/ ><br/ >
  13. <br/ ><br/ ><br/ ><br/ ><br/ ><br/ ><br/ >
  14. <br/ ><br/ ><br/ ><br/ ><br/ ><br/ ><br/ >
  15. <br/ ><br/ ><br/ ><br/ ><br/ ><br/ ><br/ >
  16. <br/ ><br/ ><br/ ><br/ ><br/ ><br/ ><br/ >
  17. <br/ ><br/ ><br/ ><br/ ><br/ ><br/ ><br/ >
  18. <br/ ><br/ ><br/ ><br/ ><br/ ><br/ ><br/ >
  19. <br/ ><br/ ><br/ ><br/ ><br/ ><br/ ><br/ >
  20. <br/ ><br/ ><br/ ><br/ ><br/ ><br/ ><br/ >
  21. <br/ ><br/ ><br/ ><br/ ><br/ ><br/ ><br/ >
  22. <br/ ><br/ ><br/ ><br/ ><br/ ><br/ ><br/ >
  23. <br/ ><br/ ><br/ ><br/ ><br/ ><br/ ><br/ >
  24. <a name="answer"></a>a sled.
  25. </span>
  26. </p>

You can see the demo here. You'll need to turn off JavaScript in order to see it.

This is one way of managing the user experience in user-agents without JavaScript support but I'm sure that the Ajaxian crowd has developed other ways of tackling this same problem. We'd like to hear about it so comment away.

JSJaC

JSJaC is a jabber/XMPP client library written in JavaScript to ease implementation of web based jabber/XMPP clients. For communication with a jabber server it needs to support either HTTP Pollingor XMPP Over BOSH(formerly known as HTTP Binding). JSJaC has an object oriented design which should be quite easy to use. Communication is done by using the XML HTTP Request objectalso refered to as AJAX technology. Your browser must support this.

GWT(Google Web Toolkit)

Google Web Toolkit (GWT) is an open source Java software development framework that makes writing AJAX applications like Google Mapsand Gmaileasy for developers who don't speak browser quirks as a second language. Writing dynamic web applications today is a tedious and error-prone process; you spend 90% of your time working around subtle incompatibilities between web browsers and platforms, and JavaScript's lack of modularity makes sharing, testing, and reusing AJAX components difficult and fragile.

GWT lets you avoid many of these headaches while offering your users the same dynamic, standards-compliant experience. You write your front end in the Javaprogramming language, and the GWT compiler converts your Java classes to browser-compliant JavaScript and HTML.

Facebook API

This JavaScript client library allows you to make Facebook API calls from any web site and makes it easy to create Ajax Facebook applications. Since the library does not require any server-side code on your server, you can now create a Facebook application that can be hosted on any web site that serves static HTML. An application that uses this client library should be registered as an iframe type. This applies to either iframe Facebook apps that users access through the Facebook web site or apps that users access directly on the app’s own web sites. Almost all Facebook APIs are supported.

script.aculo.us
script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly.