Web 前端开发

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下哦;

上一篇下一篇

猜你喜欢

热点阅读