Ajax的原生以及封装
2016-12-23 本文已影响0人
Brighten_Sun
大家听过Ajax交互,可如何实现以及如何封装一个Ajax呢?今天就带大家来封装一个原生的Ajax;
ajax调用函数
url,data,type,timeout,success,error
function ajax(json){
json=json || {};
json.data=json.data || {};
json.type=json.type || 'get';
json.timeout=json.timeout || 0;
if(window.XMLHttpRequest){
var oAjax=new XMLHttpRequest();
}else{
var oAjax=new ActiveXObject('Microsoft.XMLHttp');
}
var arr=[];
for(var name in json.data){
arr.push(name+'='+encodeURIComponent(json.data[name]));
}
var sData=arr.join('&');
if(json.type=='post'){
oAjax.open('post',json.url,true);
oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
oAjax.send(sData);
}else{
oAjax.open('get',json.url+'?'+sData,true);
oAjax.send();
}
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){
clearTimeout(timer);
if((oAjax.status>=200 && oAjax.status<=300) || oAjax.status==304 ){
json.success && json.success(oAjax.responseText)
}else{
json.error && json.error(oAjax.status);
}
}
}
if(json.timeout){
var timer=setTimeout(function(){
oAjax.abort();
},json.timeout);
}
}
//ajax使用方法;
//var data='act=add&user='+AddT.value+'&pass='+AddPass.value;
//ajax({"url":"user.php",
"type":"get",
"data":{
数据
},
"success":function(str){
当请求成功时;
},
"error":function(){
当请求失败时;
}});
喜欢请用你们的小手click下哦;