日常开发网页中,时常遇到跨域问题,通常解决办法:后端提供的接口支持jsonp格式,前端采用dataType:jsonp。
一:Jquery封装的AJAX,dataType:jsonp格式的方法:
1 $.ajax({
2 type : "get",
3 async:false,
4 url : "",
5 dataType : "jsonp",
6 jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
7 jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,但是不能为空
8 success : function(data){
10 console.log(data) 27 },
28 error:function(){
29 alert(‘fail‘);
30 }
31 })
二:使用原生js封装jsonp接口,同时应用Promise对象,可以链式调用
window.STATE_CALLBACK = {
uid:new Date - 0
}
function jsonp(url,param,callbackName){
return new Promise(function(resolve,reject){
callbackName = callbackName || ‘jsonpCallback‘
var script = document.createElement(‘script‘)
script.setAttribute(‘async‘,‘async‘)
var name = [‘ymwangel‘,STATE_CALLBACK.uid++].join(‘‘)
param[callbackName] = [‘STATE_CALLBACK.‘,name].join(‘‘)
script.src = paramConcatUrl(url,param)
document.body.appendChild(script)
STATE_CALLBACK[name] = function(data){
delete STATE_CALLBACK[name]
document.body.removeChild(script)
resolve(data)
}
script.onerror = function(e){
reject(e)
}
})
}
原生js封装jsonp的函数,更能体现jsonp实现跨域的原理:在页面中创建script标签,设置script的async、src属性,然后,将script标签插入到body中,最后当响应请求成功,获取到返回的数据后,删除之前插入的script标签即可。