1、Ajax定义:
Ajax(Asynchronous JavaScript and XML:异步...)是多种技术的综合,包括:JavaScript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。
其中,使用XHTML和CSS标准化呈现,使用DOM进行动态显示和交互,使用XML和XSTL进行数据交换和处理,使用XMLHttpRequest进行异步数据读取,使用JavaScript绑定和处理数据。
2、Ajax的典型应用:
1)数据校验:判断用户注册时用户名的唯一性
2)按需读取数据:级联菜单。先读取并显示一级菜单,然后根据用户的选择,读取并加载下级菜单
3)读取外部数据:可以方便的读取XML文档、RSS文档等数据,实现数据整合或开发应用程序
3、Ajax的缺陷:
1)IE5.0、NetScape7以上版本
2)后退按钮失效
3)因为Ajax是无刷新显示数据,用户可能会没有注意到数据的更新,需要在明显的位置提示用户数据已经更新
4、Ajax应用到的技术:
1)XMLHttpRequest:
XMLHttpRequest是XMLHTTP组件对象,通过XMLHttpRequest对象,Ajax可以只同数据库进行数据层面上的交换,而不用刷新页面。
XMLHttpRequest对象的方法:
abort() 停止当前请求
getAllReponseHeaders() 作为字符串返回完整的headers
getResponseHeader("heaserLabel") 作为字符串返回单个的header标签
open("method","Url",[,asyncFlag,...]) 设置未决的请求的目标Url,方法和其他参数
send(content) 发送请求
setRequestHeader("Label","Value") 设置header,并和请求一起发送
XMLHttpRequest对象的属性:
onreadystatechange 状态改变的事件触发器
readyState 对象状态:0,未初始化;1,读取中;2,已读取;3,交互中;4,完成
responseText 服务器进程返回数据的文本版本
responseXML 服务器进程返回数据的兼容DOM的XML文档对象
status 服务器返回的状态代码,如:404,文件未找到;200,成功
statusText 服务器返回的状态的文本信息
2)JavaScript:
操作XMLHttpRequest和数据打交道
3)DOM
DOM(Document Object Model)是提供给HTML和XML使用的一组API,提供了文件的表达结构,并可以利用它改变其中的内容和可见物。教本语言通过DOM才可以跟页面进行交互。
4)XML:
XML(Extensible Markup Language)可规范定义结构化数据
5、Ajax开发框架:
Ajax也是遵循Requst/Server模式,基本流程为:对象初始化->发送请求->服务器接受->服务器返回->客户端接受->修改客户端页面显示。只不过这个过程是异步的。
A:初始化对象,并发出XMLHttpRequest对象
if(window.XMLHttpRequest)
{ //Mozilla,Safari,...
http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');
}
else if(window.ActiveXObject)
{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
http_request.overrideMimeType('text/xml');
}
B:指定相应处理函数
指定服务器返回信息时客户端的处理方式,只需要将处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性即可。如:
http_request.onreadystatechange = processRequst;
注:函数名不加括号,且不指定参数。也可使用JavaScript即时定义函数的方式。如:
http_request.onreadystatechange = function()
{};
C:发出HTTP请求
调用XMLHttpRequest对象的open和send方法。如:
http_request.open('Get','http://www.***.com/test.asp',true);
http_request.send(null);
注:第一参数为HTTP请求的方法,为Get、Post或Head
第二个参数为目标Url。这个Url只能是同网域的,否则会提示“没有权限”。目标页面处理XMLHttpRequest和普通的HTTP请求完全一样。
第三个参数指定在等待服务器返回信息的时间内是否继续执行。true,不会继续执行,默认为true
如果要传文件或Post内容给服务器,必须先调用serRequestHeader方法,修改Mime类别,如下:
http_request.serRequestHeader("Content-Type","application/x-www-form-unlencoded");。此时,资料将以查询字符串的形式列出,作为send 的参数。
D:处理服务器返回信息
1)判断readyState的值,如果为4,代表服务器已经传回了所有的信息。
if(http_request.readyState==4)
{
//处理数据
}
else
{
//信息没有返回,继续等待
}
2)判断返回的HTTP代码,保证页面没有错误
if(http_request.status==200)
{
//数据处理
}
else
{
//页面有问题
}
3)XMLHttpRequest返回信息的处理方式:
(1)responseText:将传回的信息当字符串使用
(2)responseXML:将传回的信息当XML使用,可以使用DOM处理