欢迎光临
我们一直在努力

封装库 | AJAX封装

基本功能

传入一个对象,对象内包含的所有键为:请求地址(url)、请求类型(post或get)、请求数据(data,可以放对象或字符串)、成功success方法(参数服务返回数据data),失败error方法参数(status)。

访问实例

var btn = document.querySelector('.btn');
var show = document.querySelector('.show');

btn.onclick = function(){
    ajax({
        url : './data/post.php', //地址
        type:'post', //请求方法,还可以为get
        data:{abc:123456,www:'baidu'}, //请求发送的数据
        dataType:'json', //获取数据类型,可以为json或xml
        success:function(data){
            var json = JSON.parse(data);
            show.innerHTML = `${json.abc}---${json.www}`;
        },
        error: function(status){
            alert(status);
        }
    })
}

封装代码

function ajax(options){
    //创建XMLHttpRequest()对象
    //不兼容ie5、ie6
    var xhr = new XMLHttpRequest();
    var data = '';
    if(typeof options.data === 'string'){
        data = options.data;
    }
  //若传入的data为对象,转化为字符串
    if(Object.prototype.toString.call(options.data) === '[object Object]'){
        for(var key in options.data){
            data += key + '=' + options.data[key] + '&';
        }
        data = data.substring(0,data.length-1);
    }

    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if((xhr.status>=200&&xhr.status<300)||xhr.status===304){
                //判断返回数据类型
                if(options.dataType === 'xml'){
                    options.success(xhr.responseXML);
                }else{
                    options.success(xhr.responseText);
                }
            }else{
                options.error(xhr.status);
            }
        }
    }

    //选择请求服务器的方法
    if(options.type.toLowerCase()==='get'){
        xhr.open(options.type,options.url+'?'+data+Date.now(),true);
        xhr.send(null);
    }else if(options.type.toLowerCase()==='post'){
        xhr.open(options.type,options.url,true);
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        console.log(data);
        xhr.send(data);
    }else{
        alert('目前仅支持get和post请求方式!')
        return false;
    }
}

Promise封装

function ajaxPromise(options){
    //创建XMLHttpRequest()对象
    //不兼容ie5、ie6
    return new Promise((resolve,reject)=>{
        var xhr = new XMLHttpRequest();
        var data = '';
        if(typeof options.data === 'string'){
            data = options.data;
        }
        if(Object.prototype.toString.call(options.data) === '[object Object]'){
            for(var key in options.data){
                data += key + '=' + options.data[key] + '&';
            }
            data = data.substring(0,data.length-1);
        }

        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                if((xhr.status>=200&&xhr.status<300)||xhr.status===304){
                    if(options.dataType === 'xml'){
                        resolve(xhr.responseXML);
                        // options.success(xhr.responseXML);
                    }else{
                        resolve(xhr.responseText);
                        // options.success(xhr.responseText);
                    }
                }else{
                    reject(xhr.status);
                    // options.error(xhr.status);
                }
            }
        }


        if(options.type.toLowerCase()==='get'){
            xhr.open(options.type,options.url+'?'+data+Date.now(),true);
            xhr.send(null);
        }else if(options.type.toLowerCase()==='post'){
            xhr.open(options.type,options.url,true);
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.send(data);
        }else{
            alert('目前仅支持get和post请求方式!')
            return false;
        }
    })
}

Promise调用

ajaxPromise({
        url : './data/post.php',
        type:'post',
        data:{abc:123456,www:'baidu'},
        dataType:'json',
        // success:function(data){
        //     var json = JSON.parse(data);
        //     show.innerHTML = `${json.abc}---${json.www}`;
        // },
        // error: function(status){
        //     alert(status);
        // }
    })
    .then(data => {
        var json = JSON.parse(data);
            show.innerHTML = `${json.abc}---${json.www}`;
    },status => {
        alert(status);
    })
赞(0) 打赏
未经允许不得转载:散人研 » 封装库 | AJAX封装
分享到: 更多 (0)

评论 抢沙发

4 + 5 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏