AJAX Alternatives? Gmail Choice!
Every now and then, I keep hearing people discussing the power of AJAX. First, let me explain in brief for those who don’t know about this technique:
What does AJAX stand for is Asynchronous Javascript And XML. This technique is being used frequently by WEB 2.0 designers to make cross browser website; the client can submit information without refreshing the whole page. But, is it really asynchronous? Well, for an application to be asynchronous, there should be replies without requests (you’ll get this idea better in a bit). In AJAX, there is no reply without request! It should be called SJAX (Synchronous JavaScript And XML). For the Javascript part, it’s simple! it is the only way to have a light weight client side (instead of Flash, Java Applets or ActiveX Apps). XML (Extended Markup Language) should not be a big deal since the functions used for AJAX do not require XML.
Is AJAX really powerful?
In some cases it is! but in some other cases, it’s really a bad choice.
When is it powerful?
AJAX is really powerful when it comes to submitting user information. It’s a great complement for HTML Forms; Why leaving the page when the user can send the information using javascript? I’m not gonna give examples on how to do that since there are thousands of tutorials online explaining AJAX coding.
When is it a bad choice?
It’s a bad choice when you want to implement a real Asynchronous system. Let’s take a look at Gmail or Google Reader! In Gmail, there’s a socket opened sending you notifications without requesting. It keeps on updating your inbox asynchronously! Once you receive an email, Gmail sends you a notification that you have a new email and of course, the perfect example for this technique is Google Talk inside Gmail. Is that doable with AJAX? Yes it can be done in two ways:
- The 1st way (The non professional way): You can create a timer on the client side and requests updates from Gmail’s server every few seconds. This technique is not professional at all and I’m seeing it used with many cross browser HTML Chatting tools over http protocol.
- The 2nd way (The non portable way): If Internet Explorer have sticked to the W3 specification of Javascript, it would have solved our problem, but unfortunately, they never do that. The XMLHttpRequest method can work great with firefox when it comes to asynchronous systems. The trick is to track the response: you are allowed to track the AJAX response by creating a condition in the handler checking the status of the response. We have 4 statuses! what we care about are the 3rd and 4th which are Loading and Loaded. The idea is tracking the response using the 3rd (loading) status because with firefox, the response state is 3 as soon as the client receives a portion of the response. So we don’t have to wait for the whole response in order to display it. This way, the server will echo and flush responses without requests and flushing them without closing the page. This can be done by creating a loop on the server side that checks a database for responses on every loop and flush them to the client. Here’s a pseudo code of the server side:
while (//The client is still waiting) {if (The is a response) { echo flush(); // This is very important!! } Sleep for 1 or few seconds... } You should have a good database design that won’t create a starvation for other processes (A solution is to create a DB User for every client and here Transaction Processing optimization plays a huge role to have a concurrent and consistent system).
On the client side, the AJAX code should be like the following:
function processReqChanged() { // only if req is loading if (req.readyState == 3) { // NOTICE THE "3"!!! // ...processing statements goes here... } } }But unfortunately, Internet Explorer does no process responses on the 3rd level of the ready state. This is where I came out with a solution, and after a small research, I discovered that Gmail is using the method I’ve been trying to implement in phpLiveTalk.com (not implemented yet, I’m still using an optimized version of the unprofessional technique… I would call it semi professional).
So what is the solution used by Google Gmail?
The solution is really simple, straight forward and very portable! What Gmail did is requesting an endless html page that contains streams of Javascript portions. Give it a try, It’s very powerful. So, we will have on the client side a js file that processes the responses, and another endless html that contains the Javascript Streams. Here’s how they look like:
clientside.js:
function do(var WHAT,var Values) {
switch (WHAT) {
case 1: { //delete Values }
case 2: { //add Values }
case 3: { //do whatever you want with Values }
....
}
}
and the streams.php or steams.py should be flushing responses similar to the following:
<script>do(1,123);</script>
<script>do(2,[1, 2, 3]);</script>
<script>do(4,'fusion');</script>
<script>do(6,[[1.2, 3], 'blog']);</script>
...
I would love to call this great technique: AJS or Asynchronous Javascript Streams.
You can see that in Gmail by viewing the html sources of the frames!
These techniques of having Responses without Requests are called COMET! There’s a very useful resource online you might want to check out: http://ajaxpatterns.org/HTTP_Streaming
To conclude, there isn’t a best way for all cases, there are always optimizations to be done to have a powerful system! Gmail should also have a pinging system to check whether the streams are still being loaded or they stopped for a reason or another. So the PING system is very important in such cases where people do rely on these automated systems.
For questions or suggestions, please write a comment! Thanks for reading.
Stay tuned!
I am Elie El Khoury, from Lebanon (Byblos), Woopra co-founder & CIO, Web & Software Developer, Designer, Guitarist, Mac user and the worst blogger on earth! 
Wow amazing Stuffs guys quit college and subscribe to Ekhoury ’s School of programming
these are some serious information keep on the good stuffs Ekhoury really really impressed with the google thing i didn t know that they used the python technology untill like 2 days ago .
This technique has already been named COMET
Thanks for your comment SchizoDuckie,
Well the process of having replies without responses is called COMET! But I searched for a while about COMET implementations and techniques but I couldn’t find standards or something! It seems that COMET is a concept and there are many ways to implement it (readyState == 3, or the javascript streams thing)…
Very nice man! thanks a lot ! this article was of real help to me… Looking forward to more and more programming articles.
Guys, enlightening article (for those with no idea what AJAX/COMET are…) But what’s the fuss about AJAX being Synchronous?
The A in AJAX stands for Asynchronous for a very good reason: it is because when the client (i.e. the browser) sends the request (be it voluntarely or programatically) the user does NOT have to wait for the server response (idle time looking at the blank page!) thus interrupting his ‘continuous online experience’ of viewing and usefully checking out at the page in front of him.
It is in that sense that it is called Asynchronous. Don’t try to see it as a description of the chronology of events in time, see it from the interactivity of the user perspective and his influence by the processes happening in the background to serve his page’s requests.
Hope i made a clear point..
Good work nonetheless mr Writer.
Cheers.
Thanks man for ur comment!
you are totally right… but when u compare AJAX to COMET, you’ll see the Asynchronous issue in a different manner! so COMET will be totally Asynchronous compared to ajax! Thanks again
I am not into web programming yet so I didn’t totally understand everything, bass about IE not respecting standards, well I was reading about it on some site, apparently Microsoft likes to make those things on purpose to get web developer to develop using a non standard way for there page to work with IE (most of the net users) and by doing this they make those sites not render well in other browsers to make users of those browsers use IE instead, w it’s the same for frontpage (ur talking about AJAX and I am still in frontpage
) , they create code with bugs that IE ignores but that make the page not render correctly in other browsers.
Hope I didn’t get out of the subject a lot and that I didn’t annoy you with my “discoveries”
hehe elie… I totally agree.. actually I read something similar somewhere!
Hi
Very interesting information! Thanks!
Bye
Hi,
We are currently evaluating proposals from 2 vendors, one with a solution build using AJAX and other offering their devlopement on FLEX technologies, Now i have been reading on AJX vs Flex articles and am trying to make some sense on the areas to compare.
Can anyone please advice on the clear distinction and considerations to be kept in mind whe n making a choice, please bear in mind we wont be actually devloping this. and would need to understand area of concerns from buyer’s perspective
Would appreciate any feedback on this
Regards,
Sumit
You don’t have to get too grumpy about the word Asynchronous in Ajax. Commenting on your wording:
“But, is it really asynchronous? Well, for an application to be asynchronous, there should be replies without requests”
This is your definition of asynchronous and it has nothing to do with Ajax and the true/literal meaning of asynchronous.
Literally speaking, asynchronous means you can be doing 2 things concurrently (not serially) regardless of what they are. In BSD Sockets, asynchronous means writing to the socket while reading from it at the same time instead of waiting/blocking on either one to finish. in Ajax, asynchronous means viewing the current page while requesting data in the background at the same time. (2 things happening concurrently).
Yet, I know what you have originally meant in your post. Technically, it is called push and not comet, comet is a library name that implements the push concept using javascript. Push allows the server to send the client updates/data without the user requesting it, and such a protocol is usually found in stateful/persistent connections. Push protocol is not included in the HTTP RFC doc even though it has a keep-alive mechanism which allows it to be persistent. Maybe, one day they’ll update the RFC to have the push mechanism officially documented and that all browsers can support.
Cheers,
Very interesting article ! Thanks a lot!
I’m developping a FireFox plugin for Gmail, and I was wondering, when I was lost among all those piles of Javascript and CSS sent by Gmail, how it manages to get emails in real-time using Ajax.
Hadrouj, I’d suggest you write an IMAP idle firefox extension. It’s generic and standard! Don’t rely on parsing their javascripts.
Thanks Elie, I’m not sure what do you mean by an IMAP idle extension. Actually I’m using greasemonkey to inject my JS in gmail interface and enhance the UI.
Ah that’s different! I’d like to see what you come up with. Good luck.
indeed sir, it is called Streaming because as you felt, it is “totally Asynchronous compared to AJAX”.
Once again, let me refer to the meaning of Asynchronous as being the ability to receive and send, simultaneously, without having to wait for a response to do so, and vice versa.
Streaming on the other hand, is just .. continuous, and in Gmail’s case, streaming is one-sided (from the Gmail server to the client). Client requests are emitted (ASYNCHROUNOUSLY) on the user’s demand..
Cheers.