Ajax封装

Ajax封装

function ajax(options){
            var defaults = {
                type:'get',
                url:'',
                data:{},
                header:{
                    'Content-Type':'application/x-www-form-urlencoded'
                },
                success:function(){},
                error:function(){}
            }
            // 使用options中的属性覆盖defaults中的属性
            Object.assign(defaults,options);
            //创建ajax对象
            var xhr = new XMLHttpRequest();
            var params = '';
            for(var attr in defaults.data){
                params += attr + '=' + defaults.data[attr]+'&';
            }
            params = params.substr(0,params.length-1)
            // console.log(params)
            //判断请求方式
            if(defaults.type == 'get'){
                defaults.url = defaults.url + '?' +params;
            }
            //配置Ajax对象
            xhr.open(defaults.type,defaults.url);

            if(defaults.type == 'post'){
                var contentType = defaults.header['Content-Type']
                xhr.setRequestHeader('Content-Type',defaults.header['Content-Type'])
                if(contentType=='application/x-www-form-urlencoded'){
                    xhr.send(params);
                }else{
                    xhr.send(JSON.stringify(defaults.data))
                }
                
            }else{
                xhr.send();
            }
          
            //监听xhr对象下的onload事件
            //当xhr对象接收完响应后触发
            xhr.onload = function(){
                // xhr.getResponseHeader()获取响应头中的数据
                var contentType = xhr.getResponseHeader('Content-Type')
                if(contentType.includes('application/json')){
                    xhr.responseText = JSON.parse(xhr.responseText)
                }
                if(xhr.status==200){
                    defaults.success(xhr.responseText)
                }else{
                    defaults.error(xhr.responseText)
                }
            }
        }

调用Ajax

 ajax({
            //请求方式
            type:'get',
            //请求地址
            url:'http://localhost:3000/responseData',
            data:{
                name:'张山',
                age:18
            },
            header:{
                // 'Content-Type':'application/x-www-form-urlencoded'
                'Content-Type':'json'
            },
            success:function(data){
                console.log('这里是success函数'+data)
            },
            error:function(data){
                console.log('error'+data)
            }
        })