原生js实现ajax请求和JSONP跨域请求操作示例
本文实例讲述了原生js实现ajax请求和JSONP跨域请求。分享给大家供大家参考，具体如下：
直接上代码：
constajax=(params={})=>{
constnowJson=params.jsonp?jsonp(params):json(params);
functionjsonp(params){
//创建script标签并加入到页面中
varcallbackName=params.jsonp;
varhead=document.getElementsByTagName('head')[0];
//设置传递给后台的回调参数名
params.data['callback']=callbackName;
vardata=formatParams(params.data);
varscript=document.createElement('script');
head.appendChild(script);
window[callbackName]=function(jsonData){
head.removeChild(script);
clearTimeout(script.timer);
window[callbackName]=null;
params.success&¶ms.success(jsonData);
};
//console.log(window[callbackName])
//console.log(params.url+'?'+data)
//url形式传参
//说明：下面的script加载资源后会返回一个自执行函数:[callbackName](responseData),这个形式就是去执行一个函数，函数的名字是一个参数
//同时在windows对象上定义了这个函数:[callbackName]=function(responseData){},这时就会调用这个函数
script.src=params.url+'?'+data;
//为了得知此次请求是否成功，设置超时处理
if(params.time){
script.timer=setTimeout(function(){
window[callbackName]=null;
head.removeChild(script);
params.error&¶ms.error({
message:'超时'
});
},params.time);
}
}
//格式化参数
functionformatParams(data){
vararr=[];
for(varnameindata){
arr.push(encodeURIComponent(name)+'='+encodeURIComponent(data[name]));
};
//添加一个随机数，防止缓存
arr.push('v='+random());
returnarr.join('&');
}
//获取随机数
functionrandom(){
returnMath.floor(Math.random()*10000+500);
}
functionjson(params){
//请求方式，默认是GET
params.type=(params.type||'GET').toUpperCase();
//避免有特殊字符，必须格式化传输数据
params.data=formatParams(params.data);
varxhr=null;
//实例化XMLHttpRequest对象
if(window.XMLHttpRequest){
xhr=newXMLHttpRequest();
}else{
//IE6及其以下版本
xhr=newActiveXObjcet('Microsoft.XMLHTTP');
};
//监听事件，只要readyState的值变化，就会调用readystatechange事件
xhr.onreadystatechange=function(){
//readyState属性表示请求/响应过程的当前活动阶段，4为完成，已经接收到全部响应数据
if(xhr.readyState==4){
varstatus=xhr.status;
//status：响应的HTTP状态码，以2开头的都是成功
if(status>=200&&status<300){
varresponse='';
//判断接受数据的内容类型
vartype=xhr.getResponseHeader('Content-type');
if(type.indexOf('xml')!==-1&&xhr.responseXML){
response=xhr.responseXML;//Document对象响应
}elseif(type==='application/json'){
response=JSON.parse(xhr.responseText);//JSON响应
}else{
response=xhr.responseText;//字符串响应
};
//成功回调函数
params.success&¶ms.success(response);
}else{
params.error&¶ms.error(status);
}
};
};
//连接和传输数据
if(params.type=='GET'){
//三个参数：请求方式、请求地址(get方式时，传输数据是加在地址后的)、是否异步请求(同步请求的情况极少)；
xhr.open(params.type,params.url+'?'+params.data,true);
xhr.send(null);
}else{
xhr.open(params.type,params.url,true);
//必须，设置提交时的内容类型
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8');
//传输数据
xhr.send(params.data);
}
}
}
exportdefaultajax;
调用：
ajax({
jsonp:'JSONP',
url:'http://localhost:8080/test',
data:{},
time:1000,
success:function(data){
console.log(data)
},
error:function(error){
console.log(error)
}
})
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中ajax操作技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。