原生ajax封装,原生跨域请求jsonp封装

公子初心
2022-09-22 / 0 评论 / 33 阅读 / 正在检测是否收录...

原生ajax封装代码

   function ajax(options) {
            var defaults = {
                type:'get',
                url:'',
                data:{},
                headers:{
                    'Content-type':'application/x-www/form-urlencoded'
                },
                success:function(){},
                error:function(){}
            }
            // 使用options对象中的属性覆盖defaults对象中的属性
            Object.assign(defaults,options);
            var xhr = new XMLHttpRequest();
            // get 请求 url = "http://localhost:3000?a=1&b=2;"
            var params = '';
            for(var i in options.data){
                params+=i+'='+defaults.data[i]+'&';
            }
            // 去掉多余的&符号
            params = params.substr(0,params.length-1);
            if(defaults.type == 'get'){
                defaults.url = defaults.url + '?' + params;
            }

            // console.log(params);
            xhr.open(defaults.type,defaults.url)

            if(defaults.type == 'get'){
                xhr.send();
            }else{
                var contentType = defaults.headers['Content-type'];
                xhr.setRequestHeader('Content-Type',contentType);
                if(contentType == 'application/json'){
                    xhr.send(JSON.stringify(defaults.data));
                }else{
                    xhr.send(params);
                } 
            }
            xhr.onload = function(){
                // text/html; charset=utf-8   application/json; charset=utf-8
                console.log(xhr.getResponseHeader('Content-Type'));
                var contentType = xhr.getResponseHeader('Content-Type');
                var responseText = xhr.responseText;
                if(contentType.includes('application/json')){
                    responseText = JSON.parse(responseText)
                }
                // 当http状态码为200的时候,调用对用成功失败的情况
                if(xhr.status == 200){
                    options.success(responseText,xhr);
                }else{
                    options.error(responseText,xhr);
                }   
            }
        }

原生jsonp跨域请求代码

  var btn = document.querySelector("button");
        btn.onclick = function(){
            jsonp({
                url:'http://localhost:3000/jsonp',
                data:{
                    name:'xiaoming',
                    age:18
                },
                success:function(data){
                    console.log(data);
                }
            });
        }
        // 封装jsonp函数
        function jsonp(options){
            // 1.创建script节点
            var script = document.createElement('script');
            var fn = 'fn'+Math.random().toString().replace('.','');
            // 局部变量函数赋值给全局变量函数fn
            window[fn] = options.success;
            var params = '';
            for(var i in options.data){
                params +='&'+i+'='+options.data[i];
            }
            // 2.为script标签设置属性
            script.src = options.url + "?callback="+fn+params;
            document.body.appendChild(script)
            // 3.节点加载完毕删除节点
            script.onload = function(){
                script.remove();
            }
        }
0

评论 (0)

取消