Ajax Case Study of Gmail

Ajax

Now that Ajax is brought up, everyone will immediately recall the classic Ajax applications of Gmail and Gogle map. We have seen the good performance of Gmail, then its implementation you have studied it? How is it possible to implement an asynchronous invocation of XML on several different browsers? Let's take a look.

First of all, login Gmail we will first enter this page:

<meta content= "text/html; Charset=utf-8 "http-equiv=" Content-type "> <title>Gmail</title> <link rel= "Alternate" type= "Application/atom+xml" title= "Gmail atom Feed" href= "Feed/atom"/> <script src= "? view=page&name=browser&ver=c0d3d44c64799453" ></script> <noscript> <font face=arial>

This is the main frame page and browser detection page. If the browser passes instrumentation (which supports JavaScript, cookies, and XML controls), a frame code is written on the page. To notice is that Google played a small trick here, that is called main frame page there seems to be little things, good dongdong in that is called JS frame inside it.

We then pull this JS frame out to see: A full 1500-line JavaScript code! This page has more than 240 k, almost all of which are JavaScript code. In fact, most of them are commonplace JS code, but we can get a glimpse of Google's coding style: as much as possible to compress the amount of information, variable name can use a letter of no two, the function name is all two letters, the function of the passing is not, indentation is not. Although the code is not specially encrypted, it does not have much readability after processing it. Fortunately, the system's keywords can not shrink, along the name of the XML control we can find out and Ajax asynchronous loading data related to several key functions:

function vb () {var a=null;if (r) {var b=fg? Microsoft.XMLHTTP ":" Msxml2.xmlhttp "; try{a=new ActiveXObject (b)}catch (c) {q (c); alert (" You need to enable the Active Scripting feature and the ActiveX control. ")}}else{a=new XMLHttpRequest (); if (!a) {; alert (" This browser does not support XMLHttpRequest. ")}}return A}

EMU annotation constructs an XML control and returns it to the caller

function ot (a,b) {; Try{a.send (b)}catch (c) {q (c); if (c.number==-2146697208) {alert ("Make sure the language setting for Internet Explorer is not blank.") ")}}}

EMU annotation Perform a Send data operation A:xml control B: Data to send

function Wf (a,b,c) {Da (3); B=ld (b); Hf (A,B,C)}

EMU annotation a:xml control B: URL to access C: Callback function da is a function to validate the length of a parameter

LD is a URL conversion processing function, mainly deal with the URL from the CGI parameters and page pages, etc.

function Hf (a,b,c) {Da (3); A.onreadystatechange=c;a.open ("Get", b,true); OT (A,null)}

EMU annotations do not send data direct request Resources A:xml control B: URL to access C: callback function

function nt (a,b,c,d) {Da (4); A.onreadystatechange=d;a.open ("POST", b,true); OT (A,C)}

EMU Note Send data and request Resources A:xml control B: URL to access c: data to send D: callback function

It's basically so much, there's nothing new. What does it do with the returned XML after sending an HTTP request? In fact, he didn't handle it. He deals with just the most basic responsetext, while CGI generates the JS script directly to the client callback (run with eval), or generates textual information. That's why Gmail makes it easy to cross domains in several browsers.

As one of the most admired AJAX applications, XML is rarely used. The technology that is displayed on the page like this using an XML control to send and receive text messages is basically the most popular application of Ajax now, but can it also be called Ajax? I'd rather call it aj, it's called Ajah. Come here first, next time to analyze another completely different AJAX application.

Recommendation: Google suggest of Ajax case studies