RSS Feed for This Post

AJAX Alternatives? Gmail Choice!

Category Web2.0, webmasters | Permalink | 25. February 2007

« Millions of Videos, and Now a Way to Search Inside Them | Wordpress Plugins iMP Links »

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.

462 Read

Related Posts



Trackback URL

Sociable

TAG

Share Enjoy:
, , , , , , , , , , , , , , , ,
Share and Enjoy: Digg del.icio.us Netvouz DZone ThisNext MisterWong Wists blinkbits BlinkList blogmarks BlogMemes Bumpzee co.mments connotea Furl Ma.gnolia MisterWong.de Reddit Scoopeo Slashdot SphereIt Spurl StumbleUpon YahooMyWeb BlogMemes Cn BlogMemes Fr BlogMemes Jp BlogMemes Sp blogtercimlap Blue Dot Book.mark.hu De.lirio.us DotNetKicks Fark feedmelinks Fleck Gwar Haohao Hemidemi IndiaGram IndianPad Internetmedia kick.ie LinkaGoGo Linkter MyShare Netscape NewsVine PlugIM PopCurrent ppnow RawSugar Rec6 scuttle Shadows Simpy Smarking Taggly TailRank Technorati Webride Wykop