文档介绍：
此表由评阅人填写
评价项目
满分
得分
总分
教师签字
论点、论据
40
写作规范性
30
论述逻辑性
30
河南理工大学

河南理工大学计算机学院
课程论文
课程名称: JAVA EE 编程技术(二)
论文题目: AJAX技术及应用
学生姓名__田迎迎_____
专业年级__计软 11-1___ ___
学号__411120040105______
2012年 11 月
河南理工大学计算机学院
Ajax技术及应用
关键字:Ajax,JavaScript,DOM等相关技术。
Ajax论述
Ajax是web2.0的核心之一,它采用异步模式,可以开发出基于浏览器的具有告用户交互性的web应用,改变了传统web应用的交互模式,从而可以构建出更为动态、影响更灵敏与用户体验更好的web应用程序。
Ajax全称为“Asynchronous javascript and XML”(异步javascript与XML),是一种创建交互式网页应用的网页开发技术。Ajax运用了如下的一些技术:
HTML:用于建立web应用界面;javascript:ajax技术的核心,帮助改进与服务器应用程序的通信;DHTML(Dynamic HTML):用于动态更新表单。通常使用div、span与其他动态HTML元素来标记HTML;文档对象模型DOM:用于(通过javascript代码)处理HTML结构。
Ajax相关技术
1、XMLHttpRequest简介
XMLHttpRequest,是我们得以实现异步通讯的根本。最早在IE5中以activeX组件实现;最近,mozilla 1.0与safari 1.2中实现为本地对象。XMLHttpRequest虽然不是w3c标准,但却得到了firefox、safari、opera、konqueror、IE等绝大多数浏览器的支持。这就使得ajax有了今天如火如荼的发展。
用XMLHttpRequest进行异步通讯,首先必须用javascript创建一个XMLHttpRequest对象实例。创建XMLHttpRequest对象实例的代码清单如下所示:
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e2) {
xmlHttp = false;
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
在创建XMLHttpRequest对象之后,就可以结合javascript代码完成以下工作:丛web表单中获取数据-打开到服务器的链接-设置服务器处理完成后的响应函数,这也是ajax工作的一般流程。
可以看出,创建XMLHttpRequest对象相当容易。首先,声明一个全局变量xmlHttp用来保存即将创建的XMLHttpRequest对象的引用;然后,在create XMLHttpRequest()方法中完成具体创建工作。因为IE与其他浏览器对XMLHttpRequest对象的实现方法不同,因此在创建时,通过一个分支语句进行判断。如果window.ActiveXObject调用返回true,则证明IE浏览器,那么就通过传递"Microsoft.XMLHTTP"给ActiveXObject()来创建XMLHttpRequest对象,否则就把XMLHttpRequest实现为本地javascript对象。XMLHttpRequest对象在不同浏览器上的实现是兼容的,所以可以用同样的方法访问XMLHttpRequest的方法与属性。
表 1 标准XMLHttpRequest方法
方法
说明
Abort()
getAllResponseHeader()
getAllResponseHeader(“header”)
open(“method”,”url”)
send(content)
setRequestHeader(“header”,”value”)
停止当前请求
把http请求的所有响应头部作为键值返回
返回指定收不的串值
建立对服务器的调用
向服务器发送请求
把指定收不设为所提供的值
表 2 标准XMLHttpRequest的属性
属性
说明
Onreadystatechange
Readystate
ResponseText
ResponseXML
Status
StatusText
每个状态改变都会触发这个事件处理器
请求的状态:0-未初始化,1-正在加载,2-已加载,3-交互中,4-完成
服务器响应表示为一个文本字符串值
服务器的响应,表示为一个XML
服务器的HTTP状态码
HTTP状态码的相应文本
2、利用XMLHttpRequest对象发送简单请求
创建了XMLHttpRequest对象,并了解了XMLHttpRequest对象的方法与属性后,让我们来看看怎样利用XMLHttpRequest对象发送简单请求。利用XMLHttpRequest对象发送简单请求的基本步骤如下:
1)创建XMLHttpRequest对象实例。
2)设定XMLHttpRequest对象的回调函数,利用Onreadystatechange属性。
3)设定请求属性:设定HTTP方法(GET或POST);设定目标url。利用open()方法。
4)将请求发送给服务器。利用send()方法。
3、利用DOM对服务器响应进行处理
前面已经设置了回调函数,回调函数正是用来处理服务器相应信息的。但是,别忘了我们的最终目的:解决页面完全刷新与缺乏交互性的问题。在服务器对我们的请求信息作出响应后,我们就得实现页面的无缝更新(就是无闪烁的更新信息)。要实现这一点,那么就不得不提到DOM了。
DOM(Document Object Model),文档对象模型,是以面向对象方式描述页面文档的对象模型。DOM中定义了,与平台与语言无关的,用来表示与修改文档所需的对象、以及这些对象的属性与方法。通过DOM我们可以把页面上的数据
与结构抽象成一个树形表示,进而可以通过DOM中定义的属性与方法对文档进行操作,如遍历,编辑等。
这样,服务器相应信息就可以通过DOM的方法与属性,动态的更新到叶明的响应节点。从而使用户感觉不到刷新过程的存在,提高了交互性。
传统web应用与Ajax的应用的比较
在传统的web应用模型下,客户机(浏览器或者本地机器上运行的代码)向服务器发出请求。该请求是同步的,客户机等待服务器的响应

12>