jsonp解决跨域问题

Posted ymwangel

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jsonp解决跨域问题相关的知识,希望对你有一定的参考价值。

日常开发网页中,时常遇到跨域问题,通常解决办法:后端提供的接口支持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标签即可。

以上是关于jsonp解决跨域问题的主要内容,如果未能解决你的问题,请参考以下文章

怎么解决跨域问题

json跨域解决方案-jsonp

jsonp解决跨域问题

使用jsonp完美解决跨域问题

转Php+ajax+jsonp解决ajax跨域问题

说说JSON和JSONP,浅析JSONP解决AJAX跨域问题