码迷,mamicode.com
首页 > Web开发 > 详细

jsonp解决跨域问题

时间:2018-01-05 11:09:10      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:处理程序   als   window   win   自定义   应用   success   return   封装   

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

标签:处理程序   als   window   win   自定义   应用   success   return   封装   

原文地址:https://www.cnblogs.com/ymwangel/p/8203012.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!