Question

本文是给小白的 Java EE 生存指南的第 5 篇， 讲一下前端工程师必备的 AJAX 的来龙去脉。

回到 2001 年， 当时的老刘还是小刘， 在计算所跟着老板和四川的一个公司合作，做一个类似于 OA(办公自动化) 的项目。

当时小刘刚毕业，写过一些 asp 的程序，在小刘的意识当中， 还是觉得只要你通过浏览器向服务器发出请求， 服务器处理以后， 需要 刷新整个网页 才能看到服务器处理的结果。

但是有一天我突然看到项目中大牛写的一个页面，这个页面上面是菜单，中间是一个树形结构，代表了一个公司的各个部门。

点击了菜单以后， 整个页面没有刷新， 神奇的是那个部门的树形机构竟然发生了变化！ 也就是说整个页面没有刷新， 只是 页面的局部发生了刷新。

太不可思议了 ！ 我赶紧打开那个普通的 asp 程序， 看看到底是什么情况。

原来点了菜单以后， 执行了一段 javascript， 其中创建了一个叫 XMLHttpRequest 的东西;

var xhr;

if (window.XMLHttpRequest){

xhr=new XMLHttpRequest (); //非 IE 浏览器

}else{

xhr=new ActiveXObject(" Microsoft.XMLHTTP "); //IE 浏览器

}

//放置一个回调函数： state_change， 当 http 的状态发生变化时会调用

xhr.onreadystatechange= state_change

xhr.open("GET","http://xxxxxx.xxx/xxx.asp",true); // true 表示异步调用

xhr.send(); //这是一个耗时的操作

//具体的回调函数定义

function state_change()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200){

//获取到服务器返回的 xml

xmlRes = xhr.responseXML;

//对 xml 进行处理，更新部门的树形结构， 代码略

document.getElementById('deptTree').innerHTML = xxxxxxx

}

}

//其他代码， 略

你可以想象我第一次看到这样的处理时那种震惊的表情。 原来页面可以这么写， javascript 可以这么用！

其实这里体现的思想有两点：

1. 异步调用

异步的意思是说， 调用一个耗时的函数（上例中的 xhr.send()） 以后， 不等到它返回，就直接执行后续的代码了。

当然在调用它之前会放置一个回调的函数 callback（上例中的 state_change），等到这个耗时的函数完成以后，再来调用 callback 。

为什么要这么做呢？ 主要是网络操作太耗时了， 你在浏览器中的一个点击可能访问是地球那一边的服务器， 如果是同步操作， 即等待网络操作完成以后再进行下一步， 就可能阻塞当前线程， 甚至会导致浏览器卡死的情况。

异步调用在编程中是个非常常用的手段， 后来服务器端的 javascript Node.js 几乎全是基于事件的异步调用。

2. 用 XML 做浏览器端和服务器端的数据交换

这点毋庸解释， 参见《给小白的 Java EE 指南(3): XML》 ，看看 xml 的作用。

3. 局部刷新

Javascript 取到从服务器端返回的 XML 以后， 解析该 XML, 然后通过 DOM 对象只更新整个页面 html 的一部分，例如更新一个 table, 一个 div ....

document.getElementById('deptTree').innerHTML = xxxxxxx

异步的 JavaScript 和 XML(Asynchronous Javascript And XML） 就简称 AJAX, 你看这些缩写其实没什么神秘的。

AJAX 这个词 2005 才出现，之前已经出现了大量的“AJAX”Web 应用， 我认为其中最著名的就是 Google Maps 它使用 XMLHttpRequest 异步调用服务器端来获取数据，并将数据应用在客户端，实现了无刷新的效果，极好的用户体验让 Google Maps 获取了巨大的成功。

【XML VS JSON】

但是在 javascript 中使用 XML 有两个问题：

1. XML 要求有开始标签和结束标签， 如<name>liuxin</name> ,name 出现了两次， 这在网络传输中其实是一种冗余浪费。

2. javascript 需要解析 xml , 然后展示到浏览器中。

第二点尤其不爽， 所以就有人发展了一个叫 JSON(JavaScript Object Notation) 的一个轻量级的数据格式。 JSON 其实就是 javascript 语法的子集， 就是 javascript 中的对象和数组。

对象在 js 中表示为“{}”括起来的内容，数据结构为 {key：value,key：value,...}的键值对的结构。

数组在 js 中是中括号“[]”括起来的内容，数据结构为 ["java","javascript","vb",...]。

这两种结构虽然很简单， 但是递归组合起来能表达任意的数据结构， 这就是简单的力量， 下面就是一个例子：

{

"programmers":

[{

"firstName": "Brett",

"lastName": "McLaughlin",

"email": "aaaa"

}, {

"firstName": "Jason",

"lastName": "Hunter",

"email": "bbbb"

}],

"authors":

[{

"firstName": "Isaac",

"lastName": "Asimov",

"genre": "sciencefiction"

}, {

"firstName": "Tad",

"lastName": "Williams",

"genre": "fantasy"

}],

"musicians":

[{

"firstName": "Eric",

"lastName": "Clapton",

"instrument": "guitar"

}, {

"firstName": "Sergei",

"lastName": "Rachmaninoff",

"instrument": "piano"

}]

}

由于 JSON 本身就是 Javascript 语法的一部分 ， javascipt 代码可以直接把他们当成对象来处理， 根本不用解析 XML 了。

再加上 JSON 结构很紧凑， 很快就流行开来了， 现在 AJAX 基本上都是在用 JSON 来传递数据了。

题外话：第一次看到 AJAX 这个词的时候， 作为球迷的我脑海里第一反应是荷兰的阿贾克斯足球俱乐部， 在 90 年代， 阿贾克斯足球号称青年近卫军， 一帮小孩在欧冠决赛中把如日中天的 AC 米兰都搞定了， 后来由于《博斯曼法案》的实施，球员可以自由转会， 阿贾克斯就没落了。