原生ajax封装，原生跨域请求jsonp封装 原生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(); } }