首先我们要明白ajax的原理和使用步骤
ajax是我们与后台连接使用的一个文档,主要分为四步,有三步是我们前端工作人员去完成的,
第一步是建立ajax的对象,第二部是发送请求到后台,第三步是后台所编写的数据,第四步是我们收到后台返回数据的处理,第四步返回的格式经常的有xml和json还有字符串;
封装ajax的函数是为了我们以后工作方便使用,以后直接调用就可以的了;
主要有四个参数,(‘get或post’,‘后台做连接的文件路径’,send()数据,第四步接受后台返回的值函数)
首先是第一步建立对象,
-
if(window.XMLHttpRequest){
-
xhr=new XMLHttpRequest(); 这步是做ie7及以上的兼容
-
}
-
else{
-
xhr=new ActiveXObject('Microsoft.XMLHTTP'); 这步是做ie6的兼容
-
-
}
-
if(method=='GET' && data){
-
//如果是get方式,并且有data:传数据到服务器
-
url=url+'?'+data;
-
发送方式有两种,‘get'和'post'
-
} 如果用get方式发送就不用send()数据,如果用psot方式发送就需要send()数据
-
xhr.open(method,url,true);
-
-
if(method=='GET'){
-
xhr.send(null);
-
}
-
else{
-
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
-
xhr.send(data);
-
}
-
最后是第四步;接受后台返回的值;
-
-
xhr.onreadystatechange=function(){
-
if(xhr.readyState==4){
-
if(xhr.status==200){
-
if(fnsuccess){
-
fnsuccess(xhr.responseText);//注意这里只能接收字符串,json和html数据。如果传过来的是xml数据格式,要换用responseXML属性
-
}
-
-
}
-
else{
-
alert('出差了,出错状态是:'+xhr.status);
-
}
-
}
-
-
-
function ajax(method,url,data,fnsuccess){
-
//1号线:创建ajax对象
-
-
var xhr;
-
if(window.XMLHttpRequest){
-
xhr=new XMLHttpRequest();
-
}
-
else{
-
xhr=new ActiveXObject('Microsoft.XMLHTTP');
-
-
}
-
-
//2号线:发送http请求(准备数据,真正的发送)
-
-
if(method=='GET' && data){
-
//如果是get方式,并且有data:传数据到服务器
-
url=url+'?'+data;
-
-
}
-
xhr.open(method,url,true);
-
-
if(method=='GET'){
-
xhr.send(null);
-
}
-
else{
-
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
-
xhr.send(data);
-
}
-
-
-
//4号线:拿到的数据返回给调用ajax函数的地方
-
-
xhr.onreadystatechange=function(){
-
if(xhr.readyState==4){
-
if(xhr.status==200){
-
if(fnsuccess){
-
fnsuccess(xhr.responseText);//注意这里只能接收字符串,json和html数据。如果传过来的是xml数据格式,要换用responseXML属性
-
}
-
-
}
-
else{
-
alert('出差了,出错状态是:'+xhr.status);
-
}
-
}
-
}
-
}
-
-