给小白的Java EE指南(5) : AJAX
本文是给小白的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米兰都搞定了， 后来由于《博斯曼法案》的实施，球员可以自由转会， 阿贾克斯就没落了。
-----------------------------------------------------------------------------------
码农翻身公共号(coderising) : 由工作15年的IBM架构师创建，分享编程和职场的经验教训。
回复下面的关键字,查看更多文章
神一样的程序员 键盘侠 留学 读书 调试 烂代码 小白 培训
数据结构 代码腐化 无聊 迷茫 刚工作 死锁 简历 真实项目
加入码农翻身QQ群：135769418 每周日晚9点至10点定期授课，不容错过。
长按二维码， 关注"coderising"