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

xmlRes = xhr.responseXML;

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

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

}

}

//其他代码, 略

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

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

1. 异步调用

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

当然在调用它之前会放置一个回调的函数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】

同步ajax_ajax 同步 异步_ajax同步

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

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

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

第二点尤其不爽,所以就有人发展了一个叫JSON(JavaScript Object Notation) 的一个轻量级的数据格式。 JSON其实就是javascript 语法的子集ajax同步, 就是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”

ajax 同步 异步_ajax同步_同步ajax

}, {

“firstName”: “Sergei”,

“lastName”: “Rachmaninoff”,

“instrument”: “piano”

}]

}

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

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

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

———————————————————————————–

码农翻身公共号(coderising) : 由工作15年的IBM架构师创建,分享编程和职场的经验教训。

限时特惠:本站每日持续更新海量展厅资源,一年会员只需29.9元,全站资源免费下载
站长微信:zhanting688