原生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)