吹吹 JSONP

吹吹 JSONP:

介绍:

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。

比较与区别:

JSONP???
JSON???
两者一样吗?完全不一样,连分类都不一样。

前者是一种非标准传输协议,是没有纳入标准的一种协议,只是web标准一个漏洞,被社区广泛引用,像AMD和CMD差不多。
而后者则是名门正派的,是一种数据格式,也是被广大接口开发者和调用者广泛使用。

由于时间关系,先简单描述下怎么用 JSONP吧。

1
2
3
4
5
6
7
8
9
10
11
12
function forjsonp(res) {
console.log(res)
}
function JSONP() {
var script =document.createElement('script');
var body = document.getElementsByTagName('body')[0];
script.src = 'http://192.168.1.110:666/forjsonp?callback=forjsonp';
script.charset = 'utf-8';
script.timeout = 120000;
body.appendChild(script);
}
JSONP()

解析:

  • 首先,里面有个关键词:callback。这个关键词是关系到能否成功以JSONP的方式来调用接口的因素之一。因素二就是后台要做相应处理。
  • 当前端使用的是jsonp的请求方式去调用接口时,假设后端已经配置好对应返回jsonp需要的json格式的数据,并进行返回了。那么,前端调用接口返回的数据将返回到这个 forjsonp 的函数里以参数的形式返回,不信你把forjsonp这个函数注释了,控制台就拿不到数据了,但是network里却可以看到。

深入理解:

前台:
  • 为什么我在本地定义一个名叫 forjsonp 的函数,在url后面添加一个查询参数callback,并将其值设为 forjsonp ,就能把值给返回到forjsonp这个函数里呢?这里面是有一定道理的, 这里面有前端功劳,也有后台的功劳。

  • 前台的功劳:

  • 这要追究到src这个属性,web的标签里,凡是带有src的,都是不受同源策略限制的,说大白话就是,是可以跨域的。所以,你可以发现,为什么你的img可以随意加载百度的图片,也能加载谷歌的图片;为什么你的script标签能随意加载CDN?就是因为src可以跨域。具体为什么可以,你可以理解为这是web标准的一个漏洞,虽然大家都知道,但总是个漏洞,相信有一天会被修正的,所以,不要把这个当成唯一的跨域解决方案啊。

  • 所以,前端如果要成功以JSONP的方式来调用接口,前提是定义好一个callback函数,并在url后添加?callback=函数名,就可以等待结果返回了。还有,要定义返回的是type= application/javascript(但H5后默认script标签就是这种格式,所以可以不添加),浏览器就会认为这是一段js代码,才会去自动执行。

后台:

  • 然后就是后台的功劳了:
  • 首先,在前端请求之前,后台是要做一定配置的。具体怎么配置呢?很简单,提取定义好一个变量,通常是叫做callback,也就对应为什么通常 JSONP 调用接口,url后面会跟着?callback了,当然你也可以改成 JawQback ,随你,只不过改了后,前端调用时也要相应的改成 ?JawQback=了。
  • 好进入正题,后台提前定义好callback变量后,接下来工作就是 拼接字符串 了。接收到前台发送过来的带有?callback=x(函数名)的请求,解析该url,这个x就是前台封装好了的函数名,将x保存,方便最后返回数据时使用。
  • …balabala…….处理完数据了,将数据处理成 json 格式的数据data,准备返回data。
  • 比如data={a: “我是返回值data的属性a”,b:”我是返回值data的属性b”}
  • 就将处理好的数据,并以这样的格式来拼接成字符串: x + “(“ + data + “)”,返回给前端。
  • …balabala….
  • 前端如果想获取到数据,就像前面所说,后端将数据装进了叫x的函数里了,那前端得提前定义好了这个函数才能处理这数据呀。
  • 那么,这个x函数里的参数,即返回的json数据。你可以对这个返回值随意肆虐了……

可以解决什么问题?

没听说过还能解决上面问题,除了跨域。 /微笑脸


觉得我说的不对的欢迎扫描二维码来告诉我,十分感谢!!!


个人公众号二维码

Author: JawQ_
Link: http://wujiaqiang.com/2017/11/09/JSONP/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 3.0 unless stating additionally.
支付宝-打赏
微信-打赏