后面请求所操作二级菜单项对应的所有三级菜单的所有数据,以此类推??这样,用什么就取什么、用多少就取多少,就不会有数据的冗余和浪费,减少了数据下载总量,而且更新页面时不用重载全部内容,只更新需要更新的那部分即可,相对于后台处理并重载的方式缩短了用户等待时间,也把对资源的浪费降到最低。
例子3:读取外部数据
AJAX可以调用外部数据,因此,可以对一些开发的数据比如XML文档、RSS文档进行二次加工,实现数据整合或者开发应用程序。六、AJAX的缺陷 AJAX不是完美的技术。使用AJAX,它的一些缺陷不得不权衡一下: AJAX大量使用了Javascript和AJAX引擎,而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持,Mozilla虽然也支持AJAX,但是提供XMLHttpRequest的方式不一样。所以,使用AJAX的程序必须测试针对各个浏览器的兼容性。
? AJAX更新页面内容的时候并没有刷新整个页面,因此,网页的后退功能
是失效的;有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。 ? 对流媒体的支持没有FLASH、Java Applet好。
? 一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax。
?
AJAX应用到的技术
AJAX涉及到的7项技术中,个人认为Javascript、XMLHttpRequest、DOM、XML比较有用。
A、XMLHttpRequest对象
XMLHttpRequest是XMLHTTP组件的对象,通过这个对象,AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换,而不用每次都刷新界面,也不用每次将数据处理的工作都交给服务器来做;这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。
IE5.0开始,开发人员可以在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能,不用从当前的Web页面导航就可以直接传输数据到服务器或者从服务器接收数据。,Mozilla1.0以及NetScape7则是创建继承XML的代理类
XMLHttpRequest;对于大多数情况,XMLHttpRequest对象和XMLHTTP组件很相似,方法和属性类似,只是部分属性不同。
XMLHttpRequest对象初始化:
XMLHttpRequest对象的方法: 方法 abort()
getAllResponseHeaders()
getResponseHeader(\
描述
停止当前请求 作为字符串返回完整的headers 作为字符串返回单个的header标签
open(\(提交方式get/post)\(请求服务器设置未决的请求的目资源servlet/action/jsp)\(是否发送异步标 URL,方法,和其请求true/false)[,\打开他参数 和属性的连接 send(content)
setRequestHeader(open中的post方法)(\\设置请求头
XMLHttpRequest对象的属性: 属性
Onreadystatechange(回调函数) readyState
描述
状态改变的事件触发器 对象状态(integer): 0 = 未初始化 1 = 读取中 2 = 已读取 3 = 交互中 4 = 完成
服务器进程返回数据的文本版本 服务器进程返回数据的兼容DOM的XML文档对象
服务器返回的状态码, 如:404 = \文件未找到\、200 =\成功\、500=”空指针异常”
服务器返回的状态文本信息
发送请求
设置header并和请求一起发送
responseText responseXML status
statusText
B、Javascript
Javascript一直被定位为客户端的脚本语言,应用最多的地方是表单数据
的校验。现在,可以通过Javascript操作XMLHttpRequest,来跟数据库打交道。
C、DOM
DOM(Document Object Model)是提供给HTML和XML使用的一组API,提供了文件的表述结构,并可以利用它改变其中的内容和可见物。脚本语言通过DOM才可以跟页面进行交互。Web开发人员可操作及建立文件的属性、方法以及事件都以对象来展现。比如,document就代表页面对象本身。
D、XML
通过XML(Extensible Markup Language),可以规范的定义结构化数据,是网上传输的数据和文档符合统一的标准。用XML表述的数据和文档,可以很容易的让所有程序共享。
7.2、AJAX开发框架
这里,我们通过一步步的解析,来形成一个发送和接收XMLHttpRequest请求的程序框架。AJAX实质上也是遵循Request/Server模式,所以这个框架基本的流程也是:对象初始化à发送请求à服务器接收à服务器返回à客户端接收à修改客户端页面内容。只不过这个过程是异步的。
A、初始化对象并发出XMLHttpRequest请求
为了让Javascript可以向服务器发送HTTP请求,必须使用XMLHttpRequest对象。使用之前,要先将XMLHttpRequest对象实例化。之前说过,各个浏览器对这个实例化过程实现不同。IE以ActiveX控件的形式提供,而Mozilla等浏览器则直接以XMLHttpRequest类的形式提供。为了让编写的程序能够跨浏览器运行,要这样写:
if (window.XMLHttpRequest) { // Mozilla, Safari, ... http_request = new XMLHttpRequest(); }
else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject(\}
有些版本的Mozilla浏览器处理服务器返回的未包含XML mime-type头部信息的内容时会出错。因此,要确保返回的内容包含text/xml信息。
http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml'); B、指定响应处理函数
接下来要指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性就可以了。比如: http_request.onreadystatechange = processRequest;
需要指出的时,这个函数名称不加括号,不指定参数。也可以用Javascript即时定义函数的方式定义响应函数。比如:
http_request.onreadystatechange = function() { }; C、发出HTTP请求
指定响应处理函数之后,就可以向服务器发出HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法。
http_request.open('GET', 'http://www.example.org/some.file', true); http_request.send(null);
open的第一个参数是HTTP请求的方法,为Get、Post或者Head。 open的第二个参数是目标URL。基于安全考虑,这个URL只能是同网域的,否则会提示“没有权限”的错误。这个URL可以是任何的URL,包括需要服务器解释执行的页面,不仅仅是静态页面。目标URL处理请求XMLHttpRequest请求则跟处理普通的HTTP请求一样,比如JSP可以用request.getParameter(“”)或者request.getAttribute(“”)来取得URL参数值。
open的第三个参数只是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为True,则不会继续执行,直到服务器返回信息。默认为True。 按照顺序,open调用完毕之后要调用send方法。send的参数如果是以Post方式发出的话,可以是任何想传给服务器的内容。不过,跟form一样,如果要传文件或者Post内容给服务器,必须先调用setRequestHeader方法,修改MIME类别。如下:
http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
这时资料则以查询字符串的形式列出,作为sned的参数,例如: name=value&anothername=othervalue&so=on D、处理服务器返回的信息
在第二步我们已经指定了响应处理函数,这一步,来看看这个响应处理函数都应该做什么。
首先,它要检查XMLHttpRequest对象的readyState值,判断请求目前的状态。参照前文的属性表可以知道,readyState值为4的时候,代表服务器已经传回所有的信息,可以开始处理信息并更新页面内容了。如下: if (http_request.readyState == 4) { // 信息已经返回,可以开始处理 } else {
// 信息还没有返回,等待 }
服务器返回信息后,还需要判断返回的HTTP状态码,确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中,200代表页面正常。 if (http_request.status == 200) { // 页面正常,可以开始处理信息 } else {
// 页面有问题 }
XMLHttpRequest对成功返回的信息有两种处理方式: responseText:将传回的信息当字符串使用;
responseXML:将传回的信息当XML文档使用,可以用DOM处理。 E、一个初步的开发框架
总结上面的步骤,我们整理出一个初步的可用的开发框架,供以后调用;这里,将服务器返回的信息用window.alert以字符串的形式显示出来: