美文网首页Web 前端开发
Ajax的原生以及封装

Ajax的原生以及封装

作者: Brighten_Sun | 来源:发表于2016-12-23 22:52 被阅读0次

    大家听过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下哦;

    相关文章

      网友评论

        本文标题:Ajax的原生以及封装

        本文链接:https://www.haomeiwen.com/subject/naclvttx.html