AJAX简述

    上篇文章说了半天还没提到AJAX的全称，AJAX=Aysynchonized Javascript and XML（异步Javascript和XML）。什么意思？可能许多人看了全称还摸不着头脑。这里首先我要指出的是AJAX本身绝对不是一指一个新的技术，AJAX所用到的html,css,javascript,xml等这些技术都已经是存在了许多年的非常成熟的技术，而AJAX的实质实际上是一个新的方法论（methodology，我的理解是关于客户端开发的方法轮，更进一步讲甚至可以说是Web2.0所带来的全新的web开发的方法论）。

       相信许多做过web开发的人对于浏览器端的感觉和我一样，事实上浏览器是个相当笨的东西，只能解释按一定规则（比如html）写的内容。而所谓的和服务器端交互，也只不过是把90%以上的逻辑运算和数据处理交给服务器，然后由服务器生成新的响应页面传会给客户端这样的request/response模式。换句话说，浏览器的唯一任务是解释，不是运算和数据处理。当然脚本语言的出现使得情况有所变化，客户端可以处理一些简单得逻辑，但是在传统得开发模式下，与服务器得交互和客户得请求是以同步得方式进行的。也就是说在客户橡服务器提交了请求之后客户必须等待页面的刷新以查看处理的结果，而刷新的过程是往往需要1秒以上，网络情况不好或者服务器负担过重的话甚至需要数秒中。这本身是一个非常糟糕的客户体验，但是人们似乎已经习惯这样的客户体验，甚至由于这种传统的同步方式，人们认为实质上网页就是静态的，橡新浪这样的充斥链接的门户网站，只不过是在静态的页面之间进行切换罢了（当然了，事实并非如此）。这时候AJAX来了，当gmail，google map出现的时候，人们发觉这个世界开始改变了，原来网页（对客户来说他只知道网页）也可以橡我机器里的小程序一样。

       对于程序员说，这简直是不可思议，始终无法把web开发和swt，swing，mfc这样的客户端开发放在一起谈论的原因就在于后者有一个异步的消息机制在驱动。对于C/S架构的客户端，处理客户的请求是异步的，如果按一个按钮要等上几秒钟才能反应，而期间又不可以点其他的按钮，这样的程序恐怕是永远卖不出去的，但是程序员认为这件事情发生在web客户端身上是在正常不过的了。好了，现在AJAX来了。当你拖动google map中的地图，等待地图的内容更新时，你还可以在搜索框中输入东西，这似乎时匪夷所思的，但这就是AJAX给你的。

       但AJAX究竟做了什么呢？事实上现代浏览器支持一种叫XMLHttpRequest 的对象，这种对象能够在后台（也就是异步）向服务器发送一个请求，并开启一个线程等待请求，并做出相应的处理。这就是AJAX带给我们的全部（早在AJAX以前，html支持一种叫IFrame的标签也能做和XMLHttpRequest，现在有种趋势就是把IFrame也规在了AJAX这个名称的范围之内）。当然了，这所有的一切必须依赖于诸如javascript这样的脚本语言，下面给出一个简单的例子：

var xmlHttp;      

function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}

function main {

createXMLHttpRequest();
var url = "ToolTipServlet?key=" + escape(element.id);
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}

function callback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//do something...}
}

 

createXMLHttpRequest的作用是生成XMLHttpRequest也许你会觉得好像复杂了点，没办法，这就是微软的垄断所带给开发人员的麻烦，对于ie来说它的XMLHttpRequest对象实际上是一个ActiveObject，而橡Firefox（这是我本人最喜欢的浏览器，原因在于它和Eclipse一样，遵循插件即一切的原则）这样的大多数浏览器都是用javascript原生的纯XMLHttpRequest对象。这里带给大家的一个消息是和大多数的面向固定操作系统的C/S架构的开发不同，web客户端的开发有一个跨浏览器的支持的功能，而事实上上述的写法已经隐式的用了facade设计模式来隐藏跨浏览器的XMLHttpRequest的生成问题。后面的main函数是客户端的主调函数，它调用了之前的create方法生成xmlhttprequest对象，设置了服务器的链接目标，数据提交方式，并送出了数据（为什么数据是null？当然了，因为是get方式吗，数据都在url里了，如果post的话数据必须做为send的参数传递）。xmlHttp.onreadystatechange = callback;这句代码很关键，onreadystatechange变量实际上保存的是一个回掉函数的指针，就是callback函数，这个函数是用来响音事件的，什么事件呢？就是当readyState变量发生改变时会出发的事件。（对于函数指针，可能只写过面向对象语言的人并不了解，可以把它理解为一个触动函数调用的钩子，所以说javascript和java一点关系也没有，它更是一种类 c语言，当然了，它提供的某些机制，能够让你写出面向对象的客户端代码）。让我们看看callback里面有什么xmlHttp.readyState == 4这个判断是表示已经接收了服务器的相应数据。xmlHttp.status == 200而这个表示http的状态是200。（404是典型的页面不存在的状态）。如果你要写个helloworld的ajax程序而不用服务器（url只是个本地txt文件）那么你必须这样写xmlHttp.status == 200||xmlHttp.status==0因为对于非http协议，浏览器的http状态永远是0。然后if里面你就可以做你想做的事情了，比如更新数据，xmlhttprequest对象支持文本格式和xml数据，对于xml数据你可以用浏览器的dom对象处理。

      AJAX的简介就是这样，也许你会说这么简单啊？的确，你看学习java的时候也会觉得写一个helloworld是多么的简单。现在问题的核心是，你写复杂java代码的时候必须考虑代码质量，设计模式的问题。但这些对web客户端的脚本语言来说，在ajax出现以前似乎他们并不能做太多的事情，所以代码往往是散乱，可复用性极差的，更别提什么设计模式了。但AJAX来了，客户端似乎可以做很多事情了，需要的脚本代码急剧增加了。于是AJAX也好，Web2.0也好带给开发人员的真正的思想是好的代码质量，设计模式，框架不仅仅局限于服务器端和高级语言，现在，同样web客户端和脚本语言同样需要！于是，橡ruby on rails,DOJO这样的优秀框架一个接一个的出现，但是最重要的是我们必须同样以高代码质量的态度去对待web客户端开发！上面的一个隐式的facade模式的应用就是一个最简单的例子。

       最后总结一下AJAX带给了我们什么：

       1.非常棒的冲破传统的客户体验（这里有一点在于似乎企业应用不注重客户体验，这些应用还是更多的把注意力放在数据流的处理上，所以我本人更喜欢面向民众的开发）。

       2.减轻服务器的负担，将许多对数据的处理工作放在了客户端。（这不是件坏事情，因为现在的pc机的硬件水准已经允许我们这样做了）

       3.高质量，可复用性强的客户端开发以及相应的测试，debug工具和框架。

        忘了推荐两本书了《Fundations of AJAX》和《AJAX in action》英文版的电子版应该都有下吧，前者是基础，后者实际上就是在介绍客户端开发的设计模式。另外我把前者第4章的所有例子建了一个web application，整个application的开发环境我打了一下包，需要的人和我说一下，我可以发到他邮箱，很小，解压后实际上是个eclipse工程，另外如果你没有装wtp之类的web快速开发的eclipse的插件的话，里面有个build.xml 的 ant脚本，帮你部署到你的tomcat中（这个部署脚本只支持tomcat），不过你需要把tomcat.dir这个property改成你本地的tomcat home。关于ant，我会在以后的blog中介绍。