最近在学习Ajax,怎么说呢,应该学的东西一点都不能偷懒,最后还是要学习的!谁让我的目标是成为前端大白呢?哈哈~
Ajax是对Asynchronous Javascript XML的简写。Ajax技术的核心是XMLHttpRequest对象,简称为XHR。XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获得更多的信息,简单的来说,就是当用户点击之后,可以不必刷新页面也能取得新数据。流程就是,首先使用XHR对象取得新的数据,然后再通过DOM将新数据插入到页面中。很重要的一点,Ajax通信与数据格式无关,不一定必须是XML数据。那么下面要讲的就是大名鼎鼎的XHR啦。
XMLHttpRequest对象
- 第一步来创建一个XHR对象吧。IE7是一条分界线。
(1)在IE7之前的版本创建XHR对象很复杂,先上代码吧。
<script type="text/javascript">
function createXHR(){
//callee是一个指针,指向拥有这个arguments的函数,activeXString只是一个自定义属性,仅此而已
if(typeof arguments.callee.activeXString!="string"){
//在IE5中,XHR对象是通过MSXML库中的ActiveX对象实现的
//IE7以下版本,可能会遇到三种不同版本的的XHR对象,"MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXMLHttp"
var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXMLHttp"],
i,len;
//从最高版本开始创建,如果创建失败,就被catch抓住,不处理,继续循环
for(i=0,len=versions.length;i<len;i++){
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString=versions[i];
break;
}catch(ex){
//跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}
</script>
(2)IE7+,Firefox、Opera、Chrome和Safari都已经支持原生的XHR对象,这时创建XHR对象就简单多啦,一句话搞定。
var xhr=new XMLHttpRequest();
(3)如果我们考虑到浏览器的兼容性,这时创建代码就应该是(1)和(2)的组合版。
<script type="text/javascript">
function createXHR(){
if(typeof XMLHttpRequest !="undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXObject !="undefined"){//如果原生对象不存在,检测ActiveX对象是否存在
if(typeof arguments.callee.activeXString!="string"){
var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXMLHttp"],
i,len;
for(i=0,len=versions.length;i<len;i++){
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString=versions[i];
break;
}catch(ex){
//跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Errors("No XHR abject available.");//连个对象都不存在,返回错误
}
}
var xhr=createXHR();
</script>
2.XHR的用法
讲完了创建下面就开始使用这个对象了。在使用XHR对象时,要