一、ajax是什么?
全称:Asynchronous JavaScript and XML,即异步的JavaScript和XML,通俗地讲就是用JavaScript去异步操作XML;
主要功能:进行数据交互,在不刷新整个页面的情况下,更新部分数据
二、核心实现过程
(1)创建一个XMLHttpRequest对象(相当于打开浏览器)
var xhr=new XMLHttpRequest();
由于这里存在兼容性问题,在ie6不支持该对象,使用时会报错,在ie6中是通过插件的形式来引用,可以通过使用:
new ActiveXObject("Microsoft.XMLHTTP")
在此有两种兼容性写法:
方法一:通过if-else来兼容
if(window.XMLHttpRequest){ //注意去掉window会报错,不能解决兼容性问题 xhr=new XMLHttpRequest(); }else{ xhr=new ActiveXObject("Microsoft.XMLHTTP"); }
方法二:通过try-catch来兼容
try{ xhr=new XMLHttpRequest(); } catch(e){ xhr=new ActiveXObject("Microsoft.XMLHTTP"); }
(2)通过open(),相当于在浏览器中输入地址
open()三个参数:
参1:传送的方式
参2:传送的地址
参3:是否异步,true为异步,false为同步
异步与同步:
异步:不会阻塞,前面的代码不会影响后面代码的执行
同步:会发生阻塞,前面的代码会影响后面代码的执行
xhr.open("get","xx.php",true)
(3)使用send(),相当于按下回车键,发送请求
(4)等待服务器返回内容
服务器返回的内容常放在responseText属性中,通过使用
xhr.responseText
来获取
在此需要做状态检测:
通过readyState属性来检测请求状态,以下是readyState属性常用的值:
-0(初始化),这时表明还没有调用open()方法;
-1(载入)已经调用send()方法,正在发送请求;
-2(载入完成),send()方法完成,已经收到全部响应内容;
-3(解析),正在解析响应内容
-4(完成),响应内容解析完成,可以在客户端调用;
ajax提供了一个状态检测函数:onreadystatechange事件
xhr.onreadystatechange=function(){ if(xhr.readyState==4){//这里需要做容错处理 alert(xhr.responseText); } }
上面提到的容错处理主要是针对服务器返回的状态码,当我们请求的页面不存在时,也会收到responseText,但是此时的内容不是我们想要的相应信息,所以还需要根据服务器的状态码进行进一步的检测:
这时需要用到state属性,这里是服务器的状态,http状态码
xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){ alert(xhr.responseText); }else{ alert("出错了,Err:"+xhr.status); } } }
这时,ajax的基本流程和原理已经结束了,下面汇总一下具体内容:
var xhr=null; if(window.XMLHttpRequest){ xhr=new XMLHttpRequest(); }else{ xhr=new ActiveXObject("Microsoft.XMLHTTP"); } xhr.open(传送的方式,传送地址,true/false); xhr.send(); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){ alert(xhr.responseText); }else{ alert("出错了,Err:"+xhr.status); } } }