Ajax in Google

I recently studied JavaScript and Ajax and suddenly saw an articleArticleI think it is very enlightening. Although it was a long time ago, I still think it is worth reading.

From Andrew WANG, address http://blog.csdn.net/andydevelope/archive/2006/07/18/934928.aspx

 

 

Google includes top Web developers in the United States. Developed Gmail, Google Reader, and Google maps are also classic web applications. They are all outstanding applications of Ajax technology, but interestingly they use different technologies. This may be because different development teams have different styles, but some details reveal that Google experts have adopted different implementation methods for different needs of different applications, to achieve the most perfect effect. This is the true master's height.

Let's take a look at these applications.

1. Gmail:

Gmail uses its own unique protocol to communicate between browsers and web servers on the HTTP layer.

First, the browser sends a request to the server through javascript XMLHttpRequest. For example, the URL of the inbox request is/Gmail? Search = inbox & view = TL & START = 0 & init = 1 & zx =, And the URL for requesting all unread information is:/Gmail? Search = query & Q = is % 3 aunread & view = TL & START = 0 & init = 1 & zx =. The server then returns a data block called datapack.

The first interesting thing Google did was that datapack was not based on XML, but an HTML file based on JavaScript Array format. It can contain multiple dataitems, and a dataitem is a JavaScript Array included by an encapsulated function, such as the format D (["ts", 0, "inbox", "fd36721220", 154]); here d () is a real-time parsing function, and "ts" is a dataitem type.

The advantage of doing so is: client JavascriptProgramIt can avoid parsing XML and directly use the data, thus improving processing speed and saving system resources.

In addition, the Gmail client will automatically send a refresh request to the server every two minutes. Here, Gmail has made another optimization. That is, there is a time scale (also a bit like checksum) in the refresh request ). Then, if the Gmail server finds that the current data is not as new as the data on this time scale, it will only return an empty datapack to save network and system resources.

2. Google suggest

Google suggest also uses JavaScript to regularly send XMLHTTP requests to the server, while the server returns a javascript callback function. The callback function format is sendrpcdone (frameelement, "Fast bug", new array ("Fast bug track", "fast bugs", "Fast bug", "fast bugtrack "), new array ("793,000 results", "2,040,000 results", "6,000,000 results", "7,910 results"), new array (""); where, sendrpcdone is a locally defined JavaScript function.

After receiving the callback function returned by the server, the local webpage uses the Javascript eval () function to directly execute the returned function and display the result. Simple and Direct.

It is worth noting that Chris, who studied goolge suggest, has rewritten Google's simplified but incomprehensible javscript program. It is worth reading from those who want to learn JavaScript. Google's simplified JavaScript program is understandable because it can be compressedCodeTo increase the download speed.

3. Google Maps

Unlike the previous two, Google Maps uses IFRAME instead of XMLHTTP. The server returns an HTML file. This file is opened in an IFRAME hidden in the local webpage. When it is opened, it calls window. parent. the _ load () function transmits the XML data blocks that are included by the server to a local webpage to complete data interaction between the browser and the server.

The advantage of IFRAME is that IFRAME records its status in the historical state of the browser. In this way, you can return to the previous map by clicking the "back" button of the browser. Because XMLHTTP is not included in the browser's history, if XMLHTTP is used, it can only return to the web page before Google map.

Another feature of Google Maps is that after a local webpage receives a data block, it still uses XMLHttpRequest built in the browser for parsing and then uses XSL for display, which is very formatted.

I have seen the above three articles. They have been writing them for N years. What exciting changes have occurred over the past N years? Please correct me.