首页 > 代码库 > 封装底层Ajax
封装底层Ajax
创建Ajax简易步骤:
创建Ajax对象:var xhr=new XMLHttpRequest();
链接服务器:xhr.open(‘get‘,‘a.php‘,true);
发送请求或数据:xhr.send();
状态值改变时调用函数:xhr.onreadystatechange=fncallback;
封装Ajax:
function ajax(options){
var url=options.url,
asy=options.async!==false,
type=(options.type || ‘GET‘).toUpperCase(),
data=http://www.mamicode.com/options.data || null;
suc=options.success || null,
err=options.error || null;
xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
//new XMLHttpRequest() IE7+, Firefox, Chrome, Opera, Safari
//new ActiveXObject(‘Microsoft.XMLHTTP‘) ie5、6
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
xhr.status==200 ? suc && suc(xhr.responseText) : err && err();
}
}
data=http://www.mamicode.com/(function(data){
if(data){
var arr=[];
for(var i in data){
arr.push(encodeURIComponent(i)+‘=‘+encodeURIComponent(data[i]));
//encodeURIComponent处理中文等特殊字符编码成%E5%93%88%E5%93%88形式
}
return arr.join(‘&‘); //将数组变成字符串:username=name%E5%93%88%E5%93%88&password=123
}else{
return data;
}
})(data);
if(type==‘GET‘ && data){
url+= url.indexOf(‘?‘)!=-1 ? ‘&‘ : ‘?‘;
url+=data+‘&t=‘+Math.random();
}
//用一个永远在变的数值Math.random()处理get方式留下的缓存,还可以用时间戳,new Date().getTime()
//让url成: a.php?username=name%E5%93%88%E5%93%88&password=123&t=0.06531456997618079
xhr.open(type,url,asy);
switch(type){
case ‘POST‘:
xhr.setRequestHeader(‘content-type‘,‘application/x-www-form-urlencoded‘);
data?xhr.send(data):xhr.send();
break;
default:
xhr.send();
}
}
使用方法:
document.onclick=function(){
ajax({
type:‘post‘, //默认:get
url:‘a.php‘,
data:{
username:‘name哈哈‘,
password:123
}, //默认:null
async:false, //默认:ture
success:function(sData){alert(sData)}, //默认为null
error:function(){alert(‘出错啦‘)} //默认为null
});
}
附加:
xhr.readyState属性代码:
0 未初始化的状态。创建了一个XMLHttpRequest对象,尚未初始化
1 连接状态,已经调用了open方法,并且已经准备好发送请求
2 发送状态,已经调用了send方法发出请求,尚未得到响应结果
3 正在接收状态,已经接收了HTTP响应的头部信息,正在接收响应内容
4 已加载状态,此时响应内容已完全被接收
xhr.status常见几种状态:
200——交易成功(OK)
404——没有发现文件、查询或URl(没有找到指定的资源)(Not Found)
500——服务器产生内部错误(Internal Server Error)
xhr.statusText //返回当前HTTP请求状态
xhr.abort(); //取消异步
xhr.getAllResponseHeaders(); //获取响应头信息-可通过控制台->网络XHR->Response Headers查看
xhr.setRequestHeader(); //设置请求头信息
1、get传送的数据量较小,不能大于2KB。post传送的数据量较大,理论上认为不受限制,实际因服务器或后台限制
2、get安全性低,post安全性较高。
3、从性能上讲post比get更消耗性能,原因是来自网络上的人这么说:“据Yahoo mail team 说: post方法在AJAX 请求下会被拆分成两个: sending header first, then sending data;逆向思维: post的请求如果没有data string,那么性能上应该和get是相同的。” 链接地址:http://cuishen.iteye.com/blog/2019925
~~~简而言之:GET方式传送数据量小,处理效率高,安全性低,会被缓存,而POST反之。
Ajax无注释版下载:
http://pan.baidu.com/s/1gdh9pyr
封装底层Ajax