解析jQuery中的Ajax

ajax.js   文件   

 // 模仿jQuery封装ajax
        function ajax(obj){
           var defaults = {
                //jsonp格式的数据只支持get请求,因为参数是通过script标签的src属性中的url传递,不是通过方法体传递的
                url:'#',
                dataType: 'jsonp',
                data: {},        //前端的参数传递
                jsonp:'callback',
                success:function(data){
                    console.log(data);
                }
           };

           //用传入的obj对象的属性值覆盖defaults中的属性值
           for(var key in obj){
               defaults[key] = obj[key];
           }
           

           //默认后端返回的回调函数名称
           //replace(/\D/g,"")全局替换,将非数字替换为空格
           var cbName = 'jQuery'+('3.3.1'+Math.random()).replace(/\D/g,"") + '_' + (new Date().getTime());
           
           //如果defults中含有jsonpCallback属性,则将回调函数名称替换为新的名称
           if(defaults.jsonpCallback){
               cbName = defaults.jsonpCallback;
           }

           //回调函数的调用方式:服务器响应的内容来调用
            window[cbName] = function(data){
                obj.success(data);
            }
            
            var param = '';
            for(var item in obj.data){
                param += item + '=' + obj.data[item] + "&";
            }
            if(param){
                param = param.substring(0,param.length-1);
                param = "&"+param;
            }
           
            var script = document.createElement("script");
            script.src = defaults.url + '?' +defaults.jsonp +'=' + cbName + param;

            var head = document.getElementsByTagName('head')[0];
            
            head.appendChild(script);

        }

 

test.html文件




   
   
   
    模仿jQuery封装Ajax

   
   


    

 

你可能感兴趣的:(JavaScript)