Ajax
Asynchronous JavaScript XML
这一技术最早是用来向服务器端请求以xml这种结构表示的数据时,可以不用卸载页面,就能够向服务器端请求额外的数据。
但是现在呢,Ajax已经不局限于传递xml数据。因为xml操作起来太过复杂。
Ajax技术的核心是XMLHttpRequest(XHR)对象。该对象为向服务器发送请求和解析服务器响应提供了流畅的接口,能够以异步方式从服务器取得更多信息。
新建XHR对象
IE中
IE5是第一款引入XHR对象的浏览器,(我有时候总抱怨IE8之前,后来有一种嫌弃糟糠之妻的罪恶感,我是不是不太适合做程序员?)
像创建XML DOM对象似的,这个也需要为ActiveXObject传递一个版本,来构造相应的对象。其他浏览器
就是很简单的一句new+构造函数就可以。偷懒,我就直接写原生js中Ajax XHR对象的跨浏览器创建。
function createXHR(){
var XHR=null;
if(typeof window.XMLHttpRequest !='undefined'){
XHR= new XMLHttpRequest();
}else if(typeof window.ActiveXObject !='undefined'){
if(arguments.callee.activeXString !='string'){
var versions=['MSXML2.XMLHttp.6.0','MSXML.XMLHttp.3.0','MSXML.XMLHttp'];
for(var i=0;i<versions.length;i++){
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString=versions[i];
break;
}catch(ex){
//跳过
}
}
}
XHR= new ActiveXObject(arguments.callee.activeXString)
}else{
throw new Error('您的浏览器不支持XMLHttRequest!!')
}
return XHR;
}
特点:没啥特点,和创建跨浏览器的xml dom对象类似。-
XHR对象的用法
使用XHR对象作为接口向服务器进行异步请求数据需要的步骤:
1、.open()
XHR.open('get','demo.txt?rand='+Math.random(),true);
//准备发送请求,以get方式请求,url是demo.txt,步
特点:该函数接收三个参数(要发送请求的类型,请求的URL,表示是否异步发送请求的布尔值);注意到,在请求的URL内,向服务端数据传递了一个随机值,是因为,如果不传递,那么在第一次向服务器发出请求后,IE会在第二次请求时直接从缓存中读取。所以采用随机数的方法。
open方法只是准备发送请求,
2、.send()
XHR.send(null);
特点:该方法接收一个参数,表示即要作为请求主体发送的数据。如果不需要通过请求主体发送数据,那么则必须传入null。不能不写这个必填参数。调用send之后,请求就会被分派到浏览器。
这个例子采用的是get方法,他向服务发送的数据,借助url实现,而如果采用post方法,那么就需要借助send方法来传递数据啦。
3、.resdyState
XHR.onreadystatechange=function(){
if(XHR.readyState==4){} }
同加载xml文件似的,对于异步请求,都需要为该对象添加一个监听事件,来判断,只有当客户端已经接收到全部响应数据时,才执行对文件的操作。
4、.status
在客户端接收到响应后,响应的数据会自动填充XHR对象的属性。
该属性内容包括
responseTest
作为响应主体被返回的文本
responseXML
限制响应类型为text/xml是,才返回的文本
status
响应的http状态
statusText
HTTP状态说明。
最经常用的就是第一个与第三个。
在接收到响应后,会先判断status的值,如果值为200,表示responseTest属性已经就绪。如果值为404则表示没有找到对应请求的数据。
if(XHR.status==200){
}else{
alert("获取数据错误!错误代号:"+XHR.status+"错误信息:"+XHR.statusText)
}
总的来写一下:
EventUtil.addHandler(document,'click',function(){
var XHR=createXHR();
XHR.onreadystatechange=function(){
if(XHR.readyState==4){
if(XHR.status==200){
alert(XHR.responseText)//打印服务器端返回的数据
}else{
alert("获取数据错误!错误代号:"+XHR.status+"错误信息:"+XHR.statusText)
}
}
}
XHR.open('get','demo.txt?rand='+Math.random(),true);
XHR.send(null);
});
每当用户单击页面便会触发事件,进而从服务器端异步获取数据,无需刷新整个页面。
-
.abort()取消异步
这个方法如果方法哦send之前会报错,因为已经取消异步啦,就没有要发送的东西啦。可以把他放在send()之后取消异步。