emu in blogjava

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  171 随笔 :: 103 文章 :: 1052 评论 :: 2 Trackbacks

现在提起AJAX,大家都立刻会想起Gmail、gogle map这几个经典的AJAX应用。Gmail的优良表现我们都看过了,那么它的实现你研究过了吗?它怎么在几个不同的浏览器上可以一致的实现xml异步调用的呢?一起来看看吧。

首先,登录gmail以后我们会先进入这个页面:

<html>
<head>
    
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
    
<title>Gmailtitle>
    
<link rel="alternate" type="application/atom+xml" title="Gmail Atom Feed" href="feed/atom" />
    
<script src="?view=page&name=browser&ver=c0d3d44c64799453">script>
head>
<noscript>
    
<font face=arial>
        应启用 JavaScript,才能在标准视图中使用 Gmail。然而,JavaScript 似乎已被禁用,要么就是您的浏览器不支持 JavaScript。要使用标准视图,请更改您的浏览器选项以启用 JavaScript,然后
<href="">重试a><p>要使用 Gmail 的基本 HTML 视图(不需要 JavaScript),<href="?ui=html&zy=n">请单击此处a>p>
    
font>
noscript>
<script>

script>
html>

这是主框架网页兼浏览器检测页。如果浏览器通过了检测(支持javascript、cookie和xml控件)则在页面上写一段框架代码

要注意到的是google在这里耍了一个小花招,那个叫做main的框架页面里面看来没有多少东西,好东东都在那个叫js的框架里面呢。

我们接着把这个js框架拉出来看看:

整整1500多行的javascript代码!

这个页面有240多k,几乎全都是javascript代码。有兴趣分析的兄弟姐妹们请点这里下载

其实其中大部分都是老生常谈的js代码了,不过我们可以一窥google的编码风格:尽可能压缩信息量,变量名能用一个字母的绝不用两个,函数名一概都是两个字母的,函数内的会车是没有的,缩进也是没有的。虽然代码没有特地加密,但是如此处理一番之后也就没什么可读性了。还好系统的关键字是不能缩水的,顺着xml控件的名字我们可以揪出来跟AJAX异步加载数据相关的几个关键函数:

 

function vb(){var a=null;if(r){var b=fG?"Microsoft.XMLHTTP":"Msxml2.XMLHTTP";try{a=new ActiveXObject(b)}catch(c){q(c);alert("您需要启用活动脚本功能和activeX 控件。")}}else{a=new XMLHttpRequest();if(!a){;alert("此浏览器不支持 XMLHttpRequest。")}}return a}
//emu注释 构造XML控件并返回给调用者

function ot(a,b){;try{a.send(b)}catch(c){q(c);if(c.number==-2146697208){alert("请确保 Internet Explorer 的”语言”设置部分不是空白。")}}}
//emu注释 执行发送数据操作 a:XML控件 b:要发送的数据

function Wf(a,b,c){Da(3);b=Ld(b);Hf(a,b,c)}
//emu注释 a:XML控件 b:访问的url c:回调函数 Da是验证参数长度的函数 
//
Ld是一个url转换加工的函数,主要处理url自带的CGI参数和翻页的页数等

function Hf(a,b,c){Da(3);a.onreadystatechange=c;a.open("GET",b,true);ot(a,null)}
//emu注释 不发送数据直接请求资源 a:XML控件 b:访问的url c:回调函数

function nt(a,b,c,d){Da(4);a.onreadystatechange=d;a.open("POST",b,true);ot(a,c)}
//emu注释 发送数据并请求资源 a:XML控件 b:访问的url c:要发送的数据 d:回调函数

 

基本上就这么多了,很失望吧,没有什么新鲜的东西。发送http请求之后它又怎么处理返回的xml的呢?事实上他没有处理。他所处理的仅仅是最基本responseText,而cgi则直接生成js脚本到客户端回调(用eval运行),或者生成文本信息。这就是为什么gmail可以轻松跨域几个浏览器了。

作为最受推崇的一个AJAX应用,却几乎没有用到xml。像这样用xml控件来收发文本信息后在页面上展现的技术,基本上就是现在AJAX最流行的应用方式了,不过这样也能叫AJAX吗?我宁可就叫它AJ,最多叫AJAH。

今天先到这,下回再过来分析另一个完全不同的AJAX应用吧。大家周末愉快!

posted on 2005-11-04 14:36 emu 阅读(13361) 评论(35)  编辑  收藏

评论

# re: Gmail 使用的AJAX技术研究 2005-11-06 00:05 大胃
嗯,不错,emu不愧为JS牛人。换作是我,估计早就头大了。

不过依我的一点拙见,Google自己好像没吹捧AJAX,倒是很多来自其他媒体的评论和开发人员从Gmail等应用看到了AJAX这个不算新鲜的技术原来可以做出这样优秀的嵌在浏览器里面的客户端。

退一万步讲,如果Gmail能够凭借一些并不花哨和前卫的技术,实现如此让人眼前一亮的功能,并且让整个开发社区重新认识AJAX,我想它背后一定有些不简单的东西在支撑着。
  回复  更多评论
  

# re: Gmail 使用的AJAX技术研究 2005-11-06 15:03 jiniboy
有详细的没有啊  回复  更多评论
  

# re: Gmail 使用的AJAX技术研究 2005-11-06 21:23 todogoingmm
有高手在,我也懒惰一盘。顺便问问
1)Msxml2.XMLHTTP和Microsoft.XMLHTTP有什么不同?
2)MSXML.DOMDocument和Msxml2.DOMDocument和Microsoft.XMLDOM有什么不同?
3)相信每组的功能都差不多。在使用的时候有什么经验吗?  回复  更多评论
  

# re: Gmail 使用的AJAX技术研究 2005-11-07 09:21 emu
呵呵我是技术理想主义者,sean是实用主义者。

不欣赏gmail的ajax理由是没有充分利用到xml带来的好处,后台必须为前台的每一个请求度身定做一个返回的(超)文本或者脚本,因此也在后台带来了混合编程的问题。

如果实用纯xml来做ajax,后台开发人员可以非常大的被解放出来,更多的关注业务而不是表现,我认为这是ajax带来的另一个方面的好处。有兴趣可以看看
http://qzone-search.qq.com/web/tag/tt_search.html
这个页面就是接收标准的xml数据来显示的。比如页面中间的“最近更新”部分来自于http://qzone-search.qq.com/client/tag/newtags.xml ,而搜索功能的实现则依赖于ajax加载。而tencent公司正在开发中的tm版qzone干脆用ajax技术解析rss数据来生成页面,这样后台开发人员只需要做一套提供rss订阅的cgi就可以了。

但是在gmail这样对跨浏览器要求比较高的场合上,这是很必然的选择,跨浏览器的xml解析始终是一个麻烦的东东,我现在也还搞不定。打算过一段有时间了再好好研究,实在不行就用纯javascript写一个简单一点的xml解析器,跨平台行还更好一些呵呵。

jiniboy : 本来打算hack掉gmail的脚本来分析gamil的来往数据的,这段时间忙没有办法去做,过阵子吧。至于更详细的技术实现,我认为没有进一步探究的价值了,我认识的网友有超过一打都可以实现得出来。

todogoingmm :没有仔细研究过其中的差别,其实网上的资料很多了。我认为主要差别是不同浏览器支持的不同版本的xml控件,但是我们尽量向下兼容,使用最通用的功能。  回复  更多评论
  

# re: Gmail 使用的AJAX技术研究 2005-11-08 21:48 Joyway
如果做过跨Brower的JS代码的话,尤其是要兼容一些低版本的Brower的话(象是Netscape4,5,IE4,5都要支持的),就会明白什么叫做痛苦了。其实最简单的方法就是给每个Brower写一个基本的实现,再在程序里调用这些基本的现实来做一些高级的功能。
是不是大公司都会提这么变态的要求的?  回复  更多评论
  

# re: Gmail 使用的AJAX技术研究 2005-11-09 10:54 emu
》》最简单的方法就是给每个Brower写一个基本的实现
别的不说,维护那么多版本的代码就够头疼了。其实尽可能的使用一些通用的脚本,一些浏览器特有的功能用自己做的函数包装起来再调用,在包装的函数里面判断用特定的浏览器实现,这样就要好作的多了。
跨浏览器还有一个头疼的问题是不同浏览器有不同的bug呵呵。  回复  更多评论
  

# re: Gmail 使用的AJAX技术研究 2005-11-11 01:08 emu
花了两个多钟头跟gmail的代码之后还是输给它了。
原来以为gmail的代码是没有特地加密的,但是很意外的发现在显示的主窗口(名字叫v1的那个)中,页面元素的id居然是随机生成的,也就是说其实是加了密的。而且所有的链接和按钮都无法跟踪到他们的点击事件,这简直是咄咄怪事!虽然在js页面中可以看到他很迂回的使用了onclick等事件,但是看起来中些事件似乎根本没有定义到具体的链接上,而是直接定义到框架上了。框架的document对象定义了onclick事件:

function(c){return vo(D(a),c,b)}

也就是js页面中Uy函数的返回。想这样子把各个参数顺序倒来倒取,函数调来调去的事情js页面中做了不计其数,最终事件是怎么处理的实在不得而知。gmail那个23岁的项目经理,佩服佩服!

还好,这些再稀奇古怪,其实跟AJAX的关系都不大了。个人认为这不是值得提倡的做事方式。  回复  更多评论
  

# re: Gmail 使用的AJAX技术研究 2005-11-22 17:44 盗泉
“其实其中大部分都是老生常谈的js代码了,不过我们可以一窥google的编码风格:尽可能压缩信息量,变量名能用一个字母的绝不用两个,函数名一概都是两个字母的,函数内的会车是没有的,缩进也是没有的。虽然代码没有特地加密,但是如此处理一番之后也就没什么可读性了。”

其实那是js的混淆处理,并不是 google 的编码风格。  回复  更多评论
  

# re: Gmail 使用的AJAX技术研究 2005-11-22 19:15 Daniel.Liu
其实最主要是原始的代码可能和大家开发用的一样.
经过测试无误后,再用一个代码转换工具,把变量名替换掉.
把空格回车删除掉,变成了最后的代码了.
为的就是把CORE做到最小,而且JS的加载大小应该是有限制的.
GOOGLE那种做法也就是为了尽可能减小其核心代码的长度.
毕竟对于IE的JAVA解析环境来说,多余的空格,多长的变量名是没有意义的.  回复  更多评论
  

# re: AJAX案例研究之Gmail 2005-12-06 18:45 emu
惊奇的发现Wiley Publishing
出版过一本书就叫《Hacking Gmail》

目录可以看到:

http://as.wiley.com/WileyCDA/WileyTitle/productCd-076459611X,descCd-tableOfContents.html

PART I: CUSTOMIZING GMAIL.
Chapter 1. Desktop Integration.

Chapter 2. Integrating Your Existing Mail.

Chapter 3. Gmail Power Tips.

PART II: THE GMAIL API.

Chapter 4. Skinning Gmail.

Chapter 5. How Gmail Works.

Chapter 6. Gmail and Greasemonkey.

Chapter 7. Gmail Libraries.

Chapter 8. Checking for Mail.

Chapter 9. Reading Mail.

Chapter 10. Sending Mail.

PART III: USING YOUR API.

Chapter 11. Dealing with Lables.

Chapter 12. Addressing Adresses.

Chapter 13. Building aqn API from the HTML-Only Version of Gmail.

Chapter 14. Exporting Your Mail.

Chapter 15. Using Gmail To....

Chapter 16. Using GmailFS.

Appendix: Long Code Listings.


没有找到在线阅读的连接。书中用的代码可以在这里下载到。看了一下都是些pl文件,算了,不想特地去玩perl。

相关的还有两本:《Gmail Power Tips》《Using Gmail to... 》  回复  更多评论
  

# re: AJAX案例研究之Gmail 2006-01-06 20:07 zhenxi
emu所说的那个javascript的解析器好像已经有人做出来了,就是xparse.js
www.x2design.net就是用prototype.js和xparse.js来撑起来的  回复  更多评论
  

# re: AJAX案例研究之Gmail 2006-01-06 20:18 cm4ever
那些js代码明摆着是用自动生成工具生成的,了解概念就行了,去读就有点龊了。  回复  更多评论
  

# re: AJAX案例研究之Gmail 2006-01-25 09:47 duduwolf
不是google的代码风格,那是一种js混淆器生成的代码样式
gmail是在AJAX这个名词诞生以前就有的东西,包括suggest和google map,google用xmlhttp和eval(responseText)的方式就是为了达到最实用效率最高的目的,如果gmap也用xml去解析地图信息,我想会变得很慢很低效的  回复  更多评论
  

# re: AJAX案例研究之Gmail 2006-01-25 17:26 emu
终于盼到duduwolf来留言了,荣幸荣幸。
我在你的blog上留过言,加过你的msn,几次想要联系你都未能如愿,能否留个有效的联系方式?有不少问题想和你讨论。
我认为肯定是某种js加工工具,但不是混淆器。再简单的混淆器出来的代码也是一塌糊涂的,google用的工具的加工目的仅仅是压缩文件尺寸,并没有刻意的降低可读性。
google的几个应用针对性很强,用AJaH方式显然是非常合适的。我一直想强调的是,我们做系统不可以照抄google的方式,要多在可维护性和通用性上想问题,不要放任系统变的太专用、耦合变的太强、软件变的太“硬”。  回复  更多评论
  

# re: AJAX案例研究之Gmail 2006-02-20 16:44 foxgst◎gmail.com
把表现层和业务层分开是必要的吗?……如果有人可以在概念上区分得很清楚,而且可以做代码自动生成工具生成混合的代码,快速高效而又商业化的应用,挺好,没必要失望。我也只用我觉得好的Ajax部分,规范快速高效是最终目的。

以前很希望看到google在Web页面中采用xhtml的标准,一直没有看到,依然是html,甚至连DOCTYPE都没有,我想这只能说明软件流水生产线在google的普遍存在。

充分利用技术的好处,而不仅仅是选择“好”技术来用。  回复  更多评论
  

# re: AJAX案例研究之Gmail 2006-03-13 20:52 netunit
不错,关注,正想做个网站,而应用其ajax

http://www.netunit.com.cn  回复  更多评论
  

# re: AJAX案例研究之Gmail 2006-04-06 15:37 finaland
我看到 csdn 上老发广告的这个
http://mail.ymailserver.com/webmailgmail/mail.jsp?auth=a_l_VFZ-J1m7

看了代码,好像完全和 gmail 一样的

这是怎么回事?

  回复  更多评论
  

# re: AJAX案例研究之Gmail 2006-04-06 15:43 finaland
刚才没说清楚

http://mail.ymailserver.com/default.jsp

用户名 demo
密码 demo

版本选择 google gmail 版

我看了好几个函数的命名都是一致的

难道他们拿到了gmail 的源码?  回复  更多评论
  

# re: AJAX案例研究之Gmail 2006-04-06 17:31 emu
我看了几个函数的命名和google的风格都相差甚远,而且google也不是用jsp做的,应该和google的源码没有多大关系。  回复  更多评论
  

# re: AJAX案例研究之Gmail 2006-04-06 19:23 finaland
看了你的回复又过去仔细看了一下

1、易邮主框架页面,也就是 '登录gmail以后我们会先进入' 的这个页面

有这样一段

<noscript><font face=arial>应启用 。。。。。 中间略 </font></p></noscript>

和你的分析中的第一段代码基本上完全一样(多了移动部分处理,和现在gmail 版本完全一样),包括连 Gmail 的大名都在里面

2、js 脚本框架加载方式和你分析的gmail 的方式完全一样,都是 document.write 一个 frameset 到主页面中,然后通过frame onload 事件控制转向 js 脚本页面

这种结构一样无可厚非,但是这些 frameset 和 子frame 的名字都一样,连控制转向的函数名都一样,有点不正常吧

3、上面两点都不是重点,我们看看那个 1500 行的 javascript 代码

function Wv(){var a=null;if(Bl){var b=Bm?"Microsoft.XMLHTTP":"Msxml2.XMLHTTP";try{a=new ActiveXObject(b)}catch(c){Gu(c);Xv("\u60a8\u9700\u8981\u542f\u7528\u6d3b\u52a8\u811a\u672c\u529f\u80fd\u548cactiveX \u63a7\u4ef6\u3002")}}else{a=new XMLHttpRequest();if(!a){;Xv("\u6b64\u6d4f\u89c8\u5668\u4e0d\u652f\u6301 XMLHttpRequest\u3002")}if(a){qM(a)}}return a}

这个对应你分析的第一个函数 function vb

function bw(a,b){;try{a.send(b)}catch(c){Gu(c);if(c.number==-2146697208){C("\u8bf7\u786e\u4fdd Internet Explorer \u7684\u201d\u8bed\u8a00...\u201d\u8bbe\u7f6e\u90e8\u5206\u4e0d\u662f\u7a7a\u767d\u3002")}}}

对应 function ot(a,b)

\u7684\u201d\u8bed\u8a00 这些东西很明显是自己定义的汉字编码,通过 函数 C 解码,然后 alert 出来

其他的不看了


确实,ajax 在 数据发送的细节上,全世界都只能用 XMLHTTP,全世界的代码都一样,但是易邮的这个和 gmail 的框架调用、函数组织、数据传递,连呼吸都一样,不是很奇怪吗?

还有,易邮的1500代码最后,也没忘了这句:
</body>
<!-- Copyright 2002-2006 Google Inc. -->
</html>

最低限度,很明显参考了 gmail 的代码

我们都知道,web 应用上 js 脚本是藏不住的,不然大家都看不到这个案例分析了,但是,这个 1500 行的代码,做了这么复杂的混淆,根本没办法分析清楚(本人不才,就着两个字的函数名硬看了一天,没有任何头绪),服务器端的逻辑数据如何组织,如何传递,如何响应,如何调用,是没办法从 这个 js 上推断出来的。


最后,有个问题想请教,这也是我找到这篇文章的初衷。
gmail 的页面根据你的分析,应该是由两个 frame 组成的,上面的 frame 负责显示,高度 100%,下面的 frame 是js 脚本解析层,高度为0

我的问题是,在用户切换应用的时候(比如从 inbox 切换到 all mail),上面那个用来显示的 frame 是否进行了刷新?

我看了页面 url,传到服务端的参数不同,页面源代码也不同,都是从服务端读取的当前应用的逻辑数据,从这个角度看,整个页面都被重写过,这个 frame 应该进行了刷新

但是左侧的 菜单 还有 那几个 clipBox 一直保持着,感觉不像进行了刷新

我自己试着做了一个简单的结构,发现如果上面的 frame 进行刷新,左侧菜单会被重绘,页面会出现非常短暂的白屏,虽然很短,但是非常破坏用户体验,和gmail 的效果差很远

正在百思不得其解的时候,居然无意中看到了这个 易邮 ,当场就惊呆了
在下才疏学浅,而且很磋,有怪癖,这个问题一直弄不明白,好几天都没睡好,下风顿首,望指点一二

留言写了这么长,非常不礼貌,如果不吝赐教的话,我的邮箱

jackie.lander AT gmail.com  回复  更多评论
  

# re: AJAX案例研究之Gmail 2006-04-07 10:15 emu
最近实在太忙,天天加班,没有办法仔细研究这个问题。
Gmain的Frame确实是刷新的,只是刷新比较快而已,刷新过程也有短暂的白屏,但是在页面左侧表现不明显。
这其实也不神秘,查看一下源代码就一目了然了。因为页面本身的显示内容都是用脚本生成的,我们切换到新的url上面的时候其实只是切换了新的数据,什么都不显示,要由其它框架页面解析完数据后生成新的html再瞬间替换到页面上,因此出现白屏的时间非常短。

随手做了个简单的例子,请点击这里下载。  回复  更多评论
  

# re: AJAX案例研究之Gmail 2006-04-07 12:18 finaland
谢谢  回复  更多评论
  

# re: AJAX案例研究之Gmail 2006-05-14 03:47 killjanuary
垃圾MS的IE浏览器有两个不同版本的XMLHTTPrequest

所以建立request并定义为false后,要先测试你的browers是否为MS版本1,else测试是否为MS版本2。然后再检测request是否还为false,如还是false,OK,AJAX下课,花花肠子玩不了了。 否则:开始AJAX干活  回复  更多评论
  

# re: AJAX案例研究之Gmail 2006-05-17 22:44 易邮YMailserver
易邮YMailserver让您公司拥有和网易163,126,GOOGLE Gmail一样的邮件系统
欢迎访问介绍: http://www1.yiii.net/app/shop/view.jsp?Information_Id=I00000002&templateName=shop.view.gI2

网易最新 "D计划" 版(DIV+JS 全新客户端软件模式) 试用
进入体验:

http://mail.ymailserver.com/webmaildplan/login_submit.jsp?username=demo&hostname=ymailserver.com&password=demo&doLogin=true&redirectStr=Index

网易163, 126极速版(DIV+JS) 试用
http://mail.ymailserver.com/webmail126/login_submit.jsp?username=demo&hostname=ymailserver.com&password=demo&doLogin=true&redirectStr=Index

Google Gmail邮局版(AJAX) 试用
http://mail.ymailserver.com/webmailgmail/login_submit.jsp?username=demo&hostname=ymailserver.com&password=demo&doLogin=true&redirectStr=Index
  回复  更多评论
  

# re: AJAX案例研究之Gmail 2006-05-25 20:10 pc
http://www.kpwang.com/pc/view.jsp?board_id=1&article_id=1106514125748 Java 线程/内存模型的缺陷和增强
http://www.kpwang.com/pc/view.jsp?board_id=1&article_id=1106513213315 Java基本教学:线程入门
http://www.kpwang.com/pc/view.jsp?board_id=1&article_id=1106513213240 Java学习:线程池的简单构建  回复  更多评论
  

# re: AJAX案例研究之Gmail 2006-07-10 16:01 zz
这些早注意到了,页面上有大量的js脚本要运行,其速度之慢,令人无法忍受,google的各种做法都是为了提供足够的脚本运行速度.  回复  更多评论
  

# re: AJAX案例研究之Gmail 2006-08-13 22:24 SimenKing
emu的文章很不错。

我也很早就翻过Gmail的js代码了,做web的都有个癖好就是看到好东西都要查看源码 :)
因此,我有Gmail的某个版本的代码(未扰码处理的)。直到后来...发现被扰码处理了 :(

其实gmail中Ajax用的很少,也许新集成的Gtalk应该是大量应用,不过那份代码是很早以前的(甚至在html版本出来之前),
Gmail里大量的操作是用iframe完成的,明显的例子:你点某封邮件标题查看内容的时候,浏览器有个明显的加载页面过程。

如果emu有兴趣我可以提供给你研究。

我现在什么都做,从后台到css,从服务器架设到日常维护。
有兴趣可以来我这里讨论技术问题 http://www.mipang.com/groups/tiandi/
网站上有大量Ajax实现。欢迎交流 PHP/JS/Ajax/CSS  回复  更多评论
  

# re: AJAX案例研究之Gmail 2006-08-13 22:38 SimenKing
我觉得 google calendar 也是个很不错的东西,阅读代码可以学到很多js技巧。虽然是扰码过的,关键代码还是能看懂是在做什么。  回复  更多评论
  

# re: AJAX案例研究之Gmail 2006-08-30 14:49 moses
版主你好。我现在在做一个项目。用ajax做。觉得你们的技术很好。想跟你们联系下。聊聊。看看有没有合作的机会。
我的电话13817260896我姓郭  回复  更多评论
  

# re: AJAX案例研究之Gmail 2006-09-25 19:40 SimenKing
刚建了blog

http://nukq.malmam.com

Ajax PHP方面的技术心得分享  回复  更多评论
  

# re: AJAX案例研究之Gmail 2006-10-18 13:37 Sparkwang
gmail在请求返回js而不用xml是有道理的,使用json携带数据返回客户端的做法效率是最高的。楼主认为“像这样用xml控件来收发文本信息后在页面上展现的技术,基本上就是现在AJAX最流行的应用方式了”,实际的情况未必如此,这个说法是不准确的。  回复  更多评论
  

# re: AJAX案例研究之Gmail 2006-11-24 22:22 Pengo
楼上说得很有道理.并不是必须使用xml才算Ajax  回复  更多评论
  

# re: AJAX案例研究之Gmail 2007-03-29 13:59 Gino.F.Huo
这个是不同的浏览器(和不同的浏览器版本的问题)  回复  更多评论
  

# re: AJAX案例研究之Gmail 2008-08-04 10:24 村蝈蝈
?  回复  更多评论
  

# re: AJAX案例研究之Gmail 2009-12-29 17:23 nbby
@大胃
好深刻的理解啊。  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航:
博客园   IT新闻   Chat2DB   C++博客   博问