学习要点
1 XMLHttpRequest
2 GET与POST
3 封装Ajax
Ajax技术核心是XMLHttpRequest,简称为XHR。
XHR的出现,意味着,用户只要触发某事件,在不刷新网页的情况 下,更新服务器最新的数据。
虽然Ajax中的X代表的是XML,但Ajax通信和数据格式无关,也就是说这种技术 不一定使用XML.
var xhr= new XMLHttpRequest();
alert(xhr); //XMLHttpRequest
//服务端测试
如果是IE6及以下,那我们必须还需要使用ActiveX库来实现。在低版本IE浏览器可能会遇到三种不同版本的XHR对象 ,即MSXML2.XMLHttp MSXML2.XMLHttp.3.0 MSXML2.XMLHttp6.0 . 我们可以写一个函数。
function createXHR(){
if(typeof XMLHttpRequest != 'undefined'){
return new XMLHttpRequest();
}else if (type of ActiveXObject !='undefined'){ //IE6
var versions=[
'MSXML2.XMLHttp.6.0',
'MSXML2.XMLHttp.3.0',
'MSXML2.XMLHttp'
];
for(var i =0; version.length;i++){
try{
return new ActiveXObject(version[i])
}catch(e){
//跳过
}
}
}else{
throw new Error('您的系统或浏览器不支持XML对象');
}
}
var xhr=createXHR();
alert(xhr);
在使用XHR对象时,先必须调用 open()方法,它接受三个参数 :
要发送的请求类型(get post).请求的URL和表示是否异步.
xhr.open('get','demo.php',false); //对于demo.php的get请求,false同步
open()方法并不会真正的发送请求,而只是启动一个请求以备发送。通过send()方法进行发送请求,send()方法接受一个参数 ,作为请求主体发送的数据。如果不需要则 必须填为null.执行send()方法之后,请求就会发送到服务器上。
xhr.send(null);//发送请求
addEvent(document,'click',function(){
var xhr=createXHR();
xhr.open('get','demo.php',false);
xhr.send(null);
alert(xhr.responseText);
});
PS:demo.php的代码如下
<?php echo Date('Y-M-D H:i:s')?> //一个时间
//PS:通过点击事件,不断的向服务器发送请求,然后服务器会时时的返回最新的数据。就是AJAX的功能。IE浏览器第一次会向服务器端请求,获取最新数据,而第二次它就默认获取的缓存数据,导致数据不是最新的。怎么处理缓存,可以使用JS随机字符串
addEvent(document,'click',function(){
var xhr=createXHR();
xhr.open('get','demo.php?rand='+Math.random,false);
xhr.send(null);
alert(xhr.responseText);
});
当请求发送到服务器端,收到响应后,响应的数据会自动填充XHR对象的属性。那么 一共有四个属性:
responseText, responseXML,status,statusText
接受响应后,第一步检查status属性,以确定响应以经成功返回,一般而已HTTP状态码为200作为成功的标志。除了成功的状态代码 ,还有一些别的:400,401,
addEvent(document,'click',function(){
var xhr=createXHR();
xhr.open('get','demo.php?rand='+Math.random,false);
xhr.send(null);
if(xhr.status == 200){
alert(xhr.responseText);
}else{
alert{'获取数据错误! 错误代码:'+xhr.status + '错误信息'+xhr.statusText};
}
});
我们判断HTTP状态值即可,不建议使用HTTP状态说明 ,因为跨浏览器的时候 ,可能会不太一致。
网友评论