ajax函数封装

最新推荐文章于 2022-06-21 10:07:36 发布

巷口等风

最新推荐文章于 2022-06-21 10:07:36 发布

阅读量270

点赞数 1

分类专栏： ajax 文章标签： ajax函数封装

本文链接：https://blog.csdn.net/qq_37855074/article/details/99112466

版权

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

ajax函数封装

function ajax(options){
            //存储的是默认值
            var defaults = {
                type:'get',
                url:'',
                data:{},
                header:{
                    'Content-Type':'application/x-www-form-urlencoded'
                },
                success:function(){},
                error:function(){}
            };
            //使用defaults对象中的属性覆盖defaults对象中的属性
            // Object.assign是改变原对象的
            Object.assign(defaults,options);
            //创建ajax对象
            var xhr = new XMLHttpRequest();
            //拼接请求参数的变量
            var params='';
            //循环用户传递进来的对象格式参数
            for(var attr in defaults){
                params += attr + '=' + defaults.data[attr] + '&';
            }
            //将参数最后面的&截取掉 并将截取结果重新赋值给原参数
            params = params.substr(0,params.length-1);
            //判断请求方式
            if(defaults.type == 'get'){
                defaults.url=defaults.url +'?' + params;
            }
            //配置ajax对象
            //第一个参数是请求方式
            //第二个参数是请求地址
            xhr.open(defaults.type,defaults.url);   
            //如果请求方式为post
            if(defaults.type=='post'){
                // 用户希望向服务器传递的请求参数类型
                var contentType = defaults.header['Content-Type'];
                //设置请求参数格式的类型
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                //设置请求参数的格式
                if(contentType == 'application/json'){
                    xhr.send(JSON.stringify(defaults.data));
                }else{
                    xhr.send(params);
                }
            }else{
                //发送请求
                xhr.send();
            }
            //获取服务器端给予客户端的相应数据  只调用一次
            xhr.onload = function(){
                //xhr.getResponseHeader()
                //获取响应头中的数据 接收一个参数 就是响应头中的属性名称
                // 获取的值有响应数据的类型和字符编码格式
                //获取响应头中的数据
                var contentType = xhr.getResponseHeader('Content-Type'); 
                //服务器端返回的数据
                var responseText = xhr.responseText;
                if( contentType.includes('application/json')){
                    //把服务器端返回的json字符串转换成json对象
                    responseText = JSON.parse(responseText);
                }
                //挡状态码等于200的时候
                if(xhr.status==200){
                    //调用请求成功的函数
                    defaults.success(responseText,xhr);
                }else{
                    //调用请求失败的函数
                    defaults.error(responseText,xhr);
                }
                
            }
        }
        ajax({
            url:'http://localhost:3000/first',
            success:function(data){
                console.log(data);
            },
            error:function(){
                console.log('error');
            }
        })