吹吹 JSONP_weixin_33725270-开放原子开发者工作坊

吹吹 JSONP：

介绍：

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

比较与区别：

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

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

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

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数据。你可以对这个返回值随意肆虐了......