主题：【原创】Google Mail和XMLHTTPRequest -- 请尽量

用过Google Mail后，细心的同志会注意到其用户界面和其他的web应用的有些不同：更加流畅、快捷，就象native的桌面应用一样。虽然从状态条上可以看出浏览器在不断地和Google的服务器交换信息，但浏览器的页面似乎从来没有重新加载。更妙的是，居然可以根据地址簿自动补全收件人的地址。Google Suggest更是绝妙，简直就是实时地根据表单输入框中内容的变化来更新所推荐的检索关键字列表。

在惊叹之余，大家一定会好奇，Google到底用了什么新技术？可在这浏览器还是以前的浏览器啊？Google也没让下载安装任何插件啊？

其实，Google没有用任何“新”技术。在Google Mail、Google Maps和Google Suggest等应用中，把user experience推向一个新高度的是JavaScript和XMLHTTPRequest。

在客户端使用JavaScript并不新奇。配合CSS和DHTML，适当地使用JavaScript可以为客户端增加一定的intelligence，例如在用户界面上向用户提供立即的反馈、对表单输入内容进行简单验证等，减少浏览器和服务器之间的来回。

但是，在客户端过多使用JavaScript也有其缺陷。第一，JavaScript必须以源代码的形式下载到客户端再执行。对于某些应用，例如验证信用卡号码等，这样的运行方式有可能被恶意用户劫持，结果是不可靠的。第二，在HTML页面中嵌入大量的JavaScript来处理应用逻辑，等于把表达和应用逻辑参杂到一起，会导致软件模块间的耦合增加，降低可维护性，增加功能扩展的难度。这是软件开发中的一个大忌。

XMLHTTPRequest为这两个问题提供了答案。XMLHTTPRequest使得JavaScript可以向服务器提出HTTP要求而不必重新加载页面。XMLHTTPRequest最早是由微软提出的。在IE上，是一个ActiveX对象。在基于Mozilla的浏览器和Apple的Safari上，XMLHTTPRequest已经内置于JavaScript解释器中了，是一个native JavaScript object。

简单地说，首先从ActiveX或者JavaScript解释器产生一个XMLHTTPRequest对象，注册一个响应onreadystatechange事件的JavaScript事件处理函数，然后用XMLHTTPRequest的send方法向服务器的特定URL提出HTTP请求。在事件处理函数里，检查XMLHTTPRequest对象的readyState属性和status属性。如果readyState的值是“4”，并且status是“200”，那么服务器已经接受了请求，并且完成了处理。服务器送过来的HTTP应答已经存在于XMLHTTPRequest的属性中了。这里的status其实就是HTTP协议中为HTTP应答定义的状态码，“200”是OK，“404”是Page not found，等等。

如果我们申请的URL指向一个web service，那么在XMLHTTPRequest对象的responseXML属性中就包含了DOM格式的HTTP应答。如果是普通的URL，HTTP应答则以字符串的形式存在XMLHTTPRequest对象的responseText属性中。

拿到HTTP应答后，接下来就简单了。当然，对于达到Google Suggest那样的响应速度，还有很多其他工作。例如，Google Suggest下载到浏览器的JavaScript代码几乎就是一具“木乃伊”：没有任何不必要的的空格、空行，变量名、函数名等都是一个或两个字母。

在上面这个极度简化的transaction中，浏览器并没有加载任何新的页面，通过XMLHTTPRequest所申请的URL甚至不会出现在浏览器的历史中。

参考：

http://www.adaptivepath.com/publications/essays/archives/000385.php

http://developer.apple.com/internet/webcontent/xmlhttpreq.html

http://www.xml.com/pub/a/2005/02/09/xml-http-request.html

Google Suggest的地址：

http://www.google.com/webhp?complete=1