Gmail is the best web application I have ever seen. Simple implementation, Ajax, Chat, Status Messages, Fast Mail retrieval, live updating and its features are endless. When you type: www.gmail.com, the following actions will happen.
Gmail is the best web application I have ever seen. Simple implementation, Ajax, Chat, Status Messages, Fast Mail retrieval, live updating and its features are endless. When you type: www.gmail.com, the following actions will happen.
Script1 loads the first JavaScript file view plaincopy to clipboardprint?
The first script's job is to check the browser type, os etc. The function navigator.userAgent.toLowerCase() checks whether it is opera, msie,mac,gecko,safari,palmsource,regking,windows ce,avantgo,stb,pda; sony/com2 etc. Script 2 calculates the round trip time for a 1 pixel image. This is for detremining the internet speed of the user: view plaincopy to clipboardprint?
1. function GetRoundtripTimeFunction(start) 2. { 3. return function() 4. { 5. var end = (new Date()).getTime(); 6. SetGmailCookie(”GMAIL_RTT”, (end - start)); 7. 8. } 9. }
function GetRoundtripTimeFunction(start) { return function() { var end = (new Date()).getTime(); SetGmailCookie(”GMAIL_RTT”, (end - start));
} }
Since gmail uses iframes, this script also makes sure to load the actual home page: view plaincopy to clipboardprint?
1. top.location = self.location.href
top.location = self.location.href
At the same time it also sets the cookie to show which of the google services it is using. It then loads the login form and sets focus on password field.
Script 3 handles the https connection and cookie settings for secured login. With the login screen Google still chose to go with the, not so Web 2.0 table layout but, with that aside, the login scripts will next point to: view plaincopy to clipboardprint?
This is the general url fora Google account login. Here the service=mail parameter indicates that this is a Gmail log in. When verification completes, the page is redirected to the corresponding service via javascript: view plaincopy to clipboardprint?
After registering the session and setting the cookies for login, the non secured site http://mail.google.com/mail page automatically get's refreshed by this meta tag: view plaincopy to clipboardprint?
While loading the mail page, after setting the proper login sessions, around 28 ajax requests starts executing to load all mail messages, labels, channels etc. The first DIV tag inside the body tag is that for displaying the "loading..." message.
While the Ajax request executes there is also a timer at work to check the loading time of ajax requests. If it takes more time than expected (or calculated), it shows this message: "This seems to be taking longer than usual" At the same time it provides a link to access the basic html version.
The Gmail interface is built up from a series ofthe following iFrames:
The SOUND_IFRAME session loads a flash object for playing the sounds while using the chat service from within Gmail. (Google chat indicator)
view plaincopy to clipboardprint?
1. <embed id=”flash_object” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” quality=”high” style=”position: absolute; top: 0px; left: 0px; height: 100px; width: 100px;” src=”im/sound.swf”/> Gmail saves each section, labels, inbox, mails etc in array with a unique id. This unique id is for checking for updates on the fly using ajax. For example: view plaincopy to clipboardprint?
The above url pics all the data as a javascript array. Have a look at this URL the next time you log into Gmail. You can see your labels, your received emails, your settings, your last 70 received email subjects etc. al encoded in Javascript array format. This is the URL which is to be called when you click older and newer mail, i.e. pagination. Gmail always call this url: view plaincopy to clipboardprint?
If there are any updates a new RPC call via the post method is automatically called to get new data. The calling url is the same as the one above: view plaincopy to clipboardprint?
If there are any results, the new data is loaded as a javascript array. The rest of the work is handled by the script on the client side. Whenever you open a mail from your inbox, the browser sends another request to load the sponsored links (advtisement) though this RPC: view plaincopy to clipboardprint?
The CANVAS_IFRAME is the main iframe and contains all the layout items that make up the Gmail interface. It contains the left side chat, main inbox or opened mail, the ads on the right, and all the controls. The left side chat area is created using a HTML table. The JS_IFRAME contains all the javascripts files for the entire Gmail implementation. There are around 89 js files loaded into the iframe.
When you are chatting with someone, the calling URL is as follows: view plaincopy to clipboardprint?
Now, the above url returns your chat friends and theire status messages. This is the same url used for getting the chat messages. For example when kenney.jacob@gmail chats with me, the message comes as an array like this: view plaincopy to clipboardprint?
Here active indicates whether chat is active or not (the window with orange color) and with a chat alert if the window is not active. To close of part one of this series on the architecture of Gmailwe see how Gmail checks whether or not chat is enabled inside Gmail. It does this via the following URL: view plaincopy to clipboardprint?
Ajax Projects
.jpg)
