日常开发网页中,时常遇到跨域问题,通常解决办法:后端提供的接口支持 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 标签即可。
来源: http://www.bubuko.com/infodetail-2450725.html