【旧文】AJAX总结(一)
来源:互联网 发布:指南针变频布林线源码 编辑:程序博客网 时间:2024/05/16 14:01
AJAX简介
一、AJAX是什么
在传统的web应用中,用户与应用的每一次交互,都是首先用户通过浏览器向服务器端发送一个请求,服务器解析这个请求,将相应的响应信息返回给浏览器。在服务器端业务逻辑非常复杂或者需要耗时较长的情况下,浏览器等待刷新时,页面经常是一片空白,用户只能被动等待服务器端响应完成,在此期间客户不能在页面上做任何操作,带给用户非常糟糕的体验。
在用户只是需要刷新页面一小部分的情况下,传统的web应用需要刷新整个页面,造成网络流量的浪费,也造成响应速度变慢。
2005年,随着AJAX的出现,这种情况得到了改观。
AJAX这个术语是由Adaptive Path公司的Jesse James Garrett的定义的,他说它是Asynchronous Javascript and Xml的简写。AJAX并不是一种技术,它是多种技术的强大组合,它包括:
Ø 基于XHTML和CSS标准的表示;
Ø 使用DOM进行动态显示和交互;
Ø 使用XML和XSLT进行数据交换与处理
Ø 使用XMLHttpRequest与服务器进行异步通信;
Ø 使用JavaScript绑定一切。
在AJAX涉及的这7项技术中,DOM、XML、XMLHttpRequest、JavaScript最为有用。
二、使用AJAX的利弊
使用AJAX,可以为开发人员、终端用户带来可见的便捷:
Ø 减轻服务器的负担。AJAX的原则是“按需取数据”,可以最大程度的减少冗余请求和响应对服务器造成的负担。
Ø 无刷新更新页面,减少用户心理和实际的等待时间。特别是当读取大量数据的时候,AJAX使用XMLHTTP对象发送请求并获取服务器响应,在不重新载入整个页面的情况下用Javascript操作DOM最终更新页面。在读取数据的过程中,用户面对的不是白屏,是原来页面的内容,用户可以继续进行其他操作,只有当数据接收完毕之后才更新相应部分内容。
Ø 带来更好的用户体验。一直以来,B/S程序在用户易操作性、界面友好性上跟C/S相比都有较大的差距,随着AJAX的应用,这种情况将得到较大的改观。
Ø 可以把以前服务器负担的一些工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器的负担。
目前,AJAX仍然有一些缺陷:
Ø AJAX大量使用Javascript和AJAX引擎,这取决于浏览器的支持,而且在不同的浏览器上,提供XMLHttpRequest的方式也不一样,使用AJAX的程序必须测试针对不同浏览器的兼容性。
Ø AJAX更新页面内容时并没有刷新页面,因此,网页的后退功能是失效的,用户无法通过点后退按钮返回到上一个页面。
三、XMLHttpRequest对象
1. XMLHttpRequest对象简介
XMLHttpRequest对象(以下简称XHR对象)是AJAX跟服务器通讯的核心,通过这个对象,AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换,而不用每次都刷新页面,也不用每次将数据处理的工作都交给服务器来做,这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。
XHR对象从IE5.0开始就已经出现了,是作为ActiveX组件的形式提供的;从Mozilla 1.0和Safari 1.2开始,也提供对XHR对象的支持,不过是作为本地JavaScript对象实现的。
2. XHR对象的创建
由于在不同的浏览器里,XHR对象的实现方式不同,为了开发跨浏览器的AJAX应用,XHR对象的创建也必须考虑到不同浏览器的兼容性。
一般的,XHR对象的创建可以通过下面的方式:
3. XHR对象的方法
方法
描述
abort()
停止当前请求
getAllResponseHeaders()
作为字符串返问完整的响应头
getResponseHeader("headerLabel")
作为字符串返问单个的响应头
open("method","URL"[,asyncFlag[,"userName"[, "password"]]])
设置请求的方法, 目标 URL, 和其他参数
send(content)
发送请求
setRequestHeader("label", "value")
设置header并和请求一起发送
在XHR对象的方法中,最常用的也是最重要的是open方法和send方法。
4. XHR对象的属性
属性
描述
readyState
对象状态(integer): 0: 未初始化 1 : 读取中 2 : 已读取 3 : 交互中 4 : 完成
onreadystatechange
状态改变的事件触发器
responseText
服务器进程返回数据的文本版本
responseXML
服务器进程返回数据的兼容DOM的XML文档对象
status
服务器返回的状态码, 如:404 = "文件末找到" 、200 ="成功"
statusText
服务器返回的状态文本信息
XHR对象的属性,都非常重要,使用的也都非常频繁。
5. 使用XHR对象跟服务器通讯
通讯的服务器端可以是servlet、jsp、asp、php等。
要使用AJAX跟服务器通讯,一般要经过如下的流程或步骤:
1) 用户操作触发Javascript事件的处理函数,在处理函数中首先创建XHR对象;
2) 调用XHR对象的open方法,指定请求的方法、URL、是否异步等;
3) 设置XHR对象的onreadystatechange属性,捕获XHR对象的readyState的改变;
4) 当XHR对象的readyState属性发生改变的时候,会触发onreadystatechange属性指定的函数,在这个函数里,我们根据逻辑编写相应的代码处理。
在使用XHR对象跟服务器通讯的过程中,有几个事项需要注意。
1) 在XHR对象的创建和初始化过程中,要注意兼容不同的浏览器;
2) 指定onreadystatechange属性对应的函数时,函数后不跟括号,也没有参数。
3) XHR对象的open方法和send 方法的使用
open方法的asyncFlag参数(是否异步),默认为true,表示向服务器发送请求后在等待服务器响应返回的时间里,继续执行下面的代码,不必等待服务器返回,服务器响应返回的时候会触发onreadystatechange属性指定的函数。
open方法中,mehtod参数可以是GET、POST、HEAD,最常用的是GET、POST;
method参数是GET时,发送到服务器的参数以名值对的形式跟在URL后面,URL和参数之间用?隔开,不同的参数之间用&隔开(形如url?name1=value1&name2=value2)。send方法的参数则是null
使用GET方法的示例:
open方法中如果method参数是POST,则URL后面不跟参数;同时在调用XHR对象的的send方法前,一定要通过XHR对象的:
setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
方法设置请求头;
请求参数以名值对的形式作为send方法的参数。
使用POST方法的示例:
未完待续……
- 【旧文】AJAX总结(一)
- 【旧文】AJAX总结(二)
- ajax总结(一)
- 旧知识打造新技术--AJAX学习总结
- ajax 学习总结(一)
- Ajax学习总结(一)
- ajax的总结( 一)
- ajax常见问题总结一
- ajax总结一
- ANSI C(一)//旧文迁移
- COM漫谈(旧文)
- ajax知识总结系列一
- AJAX与JSON的一些总结(一)
- 【Hibernate系列】(一):心底好似旧相识
- ajax(一) 初识ajax
- Jquery,Ajax等前端技术总结一
- Ajax基础(一)
- ajax读书笔记(一)
- 不能向局部变量赋予默认值以及必须声明标量变量——sqlserver存储过程
- 关于j2me中RMS的大小限制
- 卫星通信的基础知识
- Windows相关问题总结
- gcc内嵌汇编的语法介绍
- 【旧文】AJAX总结(一)
- LINUX下如何对一个程序限速
- ARM ADS中的AXD 调试经验集锦
- UNIX环境高级编程学习之第十一章线程-用互斥锁传送安全线程参数
- 关于Java函数调用的一点体会
- 通过Qt4.2样式表定制程序外观
- ext2.2时间控件在IE8下显示不完整的问题
- 学习是需要发狠的!
- 模板的使用