How it Works
The Limits of XMLHttpRequest
Ajax via XMLHttpRquest (XHR) has been revolutionizing the web, driving the web2.0 movement. While there are complaints, the technique is quite effective. However, it does have a severe limitation in that the requests can only be made to a server within the same-origin of the currently loaded page. This was implemented as a security measure, but it's a questionable one to take (see Security Outlook).
Enter COWS Ajax and many Possibilities become available. Allowing a connection to foreign sites can lead to the creation of a new breed of powerful tools and favelets. Instead of each site owner making their own tools, now a single author can make and distribute a cool tool or service that is easily installed on countless sites with the simple addition of one or two lines of code. It's extremely easy to install for a site owner, can provide extremely powerful apps to the users, and can provide extremely good branding or revenue for a tool creator.
How does it work?
Is COWS Ajax some completely new technology or technique? Well, no. Much in the tradition of XHR Ajax, the components for COWS Ajax have been around for quite some time... ever since the DOM tree was created (more on this in the History section). What makes it possible is a technique called "dynamic script tags". The basic idea is that when you wish to talk to the server, you dynamically insert a new script tag into the DOM tree.
The trick is that the URL of the script is not pointing to a javascript file, but instead pointing to something like a PHP or other backend. The server backend processes the request and returns a response in the form of a blob of javascript (or JSON object if desired). Like Ajax itself, the ability to do this has been around for awhile, but not until people have a need for connecting outside of the same-origin has it gained popularity. For the record, I've independently discovered this approach myself (with some detours) but the technique has probably been around for years in one form or another and references for "dynamic script Ajax" can be found dating several months before my own discovery. They've just not gotten the word out ;-)
COWS Ajax is more than making a dynamic script tag and sending you on your way. It includes all the functionality that a developer would typically need, while also trying to remain lightweight (people do have to download it after all!). With a (hopefully) well conceived archtecture, the base class can be easily extended if more functionality is needed. For the most part, COWS Ajax sticks to the core of what you need and handles what you don't want to think about. The class handles connecting/disconnecting, managing the request queue, the polling required for sending requests and receiving response, and handling communication errors.
Dynamic scripts sans cows
Before diving into how COWS Ajax is managing communications it may be helpful to understand what is needed for a minimum connection and explain what else is needed. For an example we'll simply ask a foreign server what time it is and display that response in an alert box. So our sample page here on cows-ajax.sourceforge.net would look like so:
<html>
<head>
<title>Dynamic Script Basic Test</title>
</head>
<script>
//<![CDATA[
// called when the "Show Me" button is pressed
function show_me()
{
///
/// dynamically insert a script tag into the DOM tree
///
// create the element
var script_object = document.createElement('SCRIPT') ;
// NOTE: the URL is connecting to a foreign site (and not a js file either)
script_object.src = 'http://www.edgeofnowhere.cc/yo_what_time_is_it.php' ;
script_object.type = 'text/javascript' ;
// do the insert
var head=document.getElementsByTagName('HEAD')[0] ;
head.appendChild( script_object);
}
//]]>
</script>
<body>
<p>You are connected to cows-ajax.sourceforge.net but we can ask a foriegn
site for the time.
<input type="button" onclick="show_me()" value="Show Me"></p>
<div id="response"></div>
</body>
</html>