AJAX真是越来越热了,最近想在项目中试用一下,所以花了点时间来研究一下。我主要参考了eamoi的《AJAX开发简略》这篇文章,它web上被四处转载,我实在搞不清楚它的出处了,我采用了其中的数据验证和级联菜单两个例子。然后又在此基础上做了另一个服务器同步的例子,模拟实现server push技术。
一、AJAX定义
AJAX(Asynchronous JavaScript and XML)其实是多种技术的综合,包括Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。其中:使用XHTML和CSS标准化呈现,使用DOM实现动态显示和交互,使用XML和XSTL进行数据交换与处理,使用XMLHttpRequest对象进行异步数据读取,使用Javascript绑定和处理所有数据。
上面是比较官方的定义,我个人认为AJAX主要通过Javascript使用XMLHttpRequest对象进行数据读取。至于是不是要用XML,是不是要异步,完全看你个人的喜好了。
顺便说一下,XML确实是好东西,值得研究。不过我看到很多AJAX书都花了大量篇幅在将XML,实在是没有必要,有兴趣系统的去研究XML才好。
另外一个好消息就是,大部分的浏览器都支持AJAX,所以开发的时候不需要附带任何的软件包。
二、为什么要用AJAX
通常在WEB开发中,每次和Server的交互都是通过请求一个页面来完成的,这样造成页面刷新的太频繁了,一方面开发的页面数量需要大大增加,另外一方面客户的体验也不好。
AJAX的主要好处就是提供了一个不用刷新页面而能够与后台通信的机制。这样就提供了类似Client/Server的通信方式,不过实现起来比C/S要复杂麻烦一些,我相信有需求就一定会有供给,这个技术将来一定会发展到类似C/S那样方便的把通讯功能包装起来,开发的时候只要简单的调用就可以了。
目前AJAX常用的方式有:
1、验证数据,不刷新页面而请求server端进行数据验证。
2、实现级联菜单,根据用户在第一级菜单选择的内容,去server抓取关联的第二级菜单。
3、实现类似“推”技术,让客户端和服务器同步。
三、XMLHttpRequest对象
XMLHttpRequest是XMLHTTP组件的对象,通过这个对象,AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换,而不用每次都刷新界面,也不用每次将数据处理的工作都交给服务器来做;这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。
IE5.0开始,开发人员可以在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能,不用从当前的Web页面导航就可以直接传输数据到服务器或者从服务器接收数据。,Mozilla1.0以及NetScape7则是创建继承XML的代理类XMLHttpRequest;对于大多数情况,XMLHttpRequest对象和XMLHTTP组件很相似,方法和属性类似,只是部分属性不同。
XMLHttpRequest对象初始化:
<script language="”javascript”" type="text/javascript">
var http_request = false;
//IE浏览器
http_request = new ActiveXObject("Msxml2.XMLHTTP");
http_request = new ActiveXObject("Microsoft.XMLHTTP");
//Mozilla浏览器
http_request = new XMLHttpRequest();
</script>
XMLHttpRequest对象的方法:
方法 | 描述 |
abort() | 停止当前请求 |
getAllResponseHeaders() | 作为字符串返回完整的headers |
getResponseHeader("headerLabel") | 作为字符串返回单个的header标签 |
open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) | 设置未决的请求的目标 URL,方法,和其他参数 |
send(content) | 发送请求 |
setRequestHeader("label", "value") | 设置header并和请求一起发送 |
XMLHttpRequest对象的属性:
属性 | 描述 |
onreadystatechange | 状态改变的事件触发器 |
readyState | 对象状态(integer): 0 = 未初始化 1 = 读取中 2 = 已读取 3 = 交互中 4 = 完成 |
responseText | 服务器进程返回数据的文本版本 |
responseXML | 服务器进程返回数据的兼容DOM的XML文档对象 |
status | 服务器返回的状态码, 如:404 = "文件未找到" 、200 ="成功" |
statusText | 服务器返回的状态文本信息 |