node Ajax完整封装

2 篇文章 0 订阅
<script>
        // 请求服务器返回客户端的数据是字符串的json数据,所以把json数据转换为json对象

        function ajax(options){
            // 存储的是默认值
            let defaults = {
                type:'get',
                url:'',
                data:{},
                header:{
                'Content-Type':'application/json'
                },
                success:()=>{},
                error:()=>{}
            };
            // 使用options里面的属性覆盖defaults里面的属性
            Object.assign(defaults,options);
            // 1.创建
            let xhr = new XMLHttpRequest();
            // 拼接请求参数的变量
            let params = '';
            // 循环用户传递进来的对象格式参数
            for(let attr in defaults.data){
                // 参数转换为字符串格式 
                params += attr + '=' + defaults.data[attr] +'&';
            }
            // 将参数最后面的&截取掉
            params = params.substr(0,params.length - 1);
            // 判断请求方式
            if(defaults.type == 'get'){
                defaults.url = defaults.url + '?' + params;
            }
            // console.log(params);
            // 2.配置ajax对象
            xhr.open(defaults.type,defaults.url);
            // 如果请求方式为post
            if(defaults.type == 'post'){
                // 用户希望的向服务器传递的请求参数的类型
                let contentType = defaults.header['Content-Type'];
                // 设置请求参数格式的类型 
                xhr.setRequestHeader('Content-type',contentType);
                // application/x-www-form-urlencoded是get式的字符拼接 
                // application/json 是json格式的
                if(contentType == 'application/json'){
                    xhr.send(JSON.stringify(defaults.data));//json转换为json字符串
                }else{
                    xhr.send(params);
                }

            }else{
                // 3.发送请求
                xhr.send();
            }
            // 监听xhr对象下面的onload事件
            xhr.onload = ()=>{
                // 获取响应头中的数据
                let contentType = xhr.getResponseHeader('Content-Type');
                // 服务器端返回的数据
                let responseText = xhr.responseText;
                // 如果响应类型包含application/json
                if(contentType.includes('application/json')){
                    responseText = JSON.parse(responseText)
                }
                if(xhr.status == 200){
                    defaults.success(responseText,xhr);
                }else{
                    defaults.error(responseText,xhr);
                }
                
            }
        }
        ajax({
            url:'http://localhost:3000/responseData',
            data: {
                name:'lf',
                age:20
            },
            success:(data,xhr)=>{
                // console.log('this is '+ data)
                console.log(data)
            }
        });

    </script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值