前言：如果技术不是为了解决问题，那将毫无意义
技术产生背景
同源策略是浏览器为了解决安全授信问题所定制的方案，同样，该方案导致了我们常见的跨域访问问题
No ‘Access-Control-Allow-origin’
同源策略降低了安全风险，同样阻断了我们请求非同域数据。为此当我们需要对可信非同域网站请求数据时需要绕过该协议。为此产生了很多相关技术，如iframe跨域，jsonp，cors，后端proxy等等。而目前以及之前应用最广的就是jsonp了
实现方式
- 高性能的javascript一书中所说的jsonp又可以称之为Dynamic script tag insertion（动态脚本注入）
- JavaScript设计模式一书中所说的Proxy模式
简单点理解就是使用html中script标签的src属性，src属性天生就可以跨域请求，所以我们可以使用非同域图片，非同域javascript。
在加上script的另外一个特性，如果script标签通过src请求返回的数据是ECMAScript规范就会正常解析，其实就是正常的js解析。
代码举例
// index.html
<html>
<head></head>
<script>
function a (data) {
console.log(data)
}
setTimeout(function () {
var script = document.createElement('script')
script.src = './jsonp.js'
document.querySelector(body).appendChild(script)
}, 1000)
</script>
<html>
// jsonp.js
a('this is jsonp response data')
这里解释一下代码运行，当我们打开index.html时，解析到script标签会创建一个函数a，函数a的功能是打印传入的值，然后过了1s之后，页面创建一个script标签引入jsonp.js，jsonp.js引入之后调用a，由于在index.html已经定义了函数，所以这里调用成功，并赋上实参’this is jsonp response data’，所以控制台打印出改字符串
以上就是jsonp的一次完整过程，由上面逻辑可以看出，函数名要保持统一，否则会出现xx not define的报错，这就是为什么我们需要在jsonp中传入callback这个参数的原因，jquery对jsonp的封装可以自动创建一个解析callback，并且随机定义函数名。至于有兴趣验证的可以找一个有jsonp请求的网页，打开控制台看看请求头与返回体。而返回的js其实是后端动态创建的字符串，拼接的文本，将你发送的callback包着数据，包装成上面jsonp.js中的格式返回到前端。这就完成了一次jsonp的前后台跨域操作
使用优点
- 使用简单，对于该方法的使用几乎深入前端的血液里面了，即使不理解其原理的人也能熟练使用该方法进行跨域处理
- 解析速度快，高性能javascript一书所列举的jsonp的解析速度优于ajax请求返回json数据的解析速度
- 兼容性好，兼容所有浏览器，乃前端一大利器。
局限性
- 请求方式只能使用GET请求 （由script的src传输，只能使用GET请求）
- 传输数据大小为2048字节 （GET请求传输数据只能使用url，所有受url长度限制为2048字节）
缺点
jsonp也有为数不多的缺点
1. 针对数据安全性，由于jsonp能绕过同源策略，所以能被所有的网页所使用，所以接口返回数据如果有敏感或可能存在的安全隐患的数据应该考虑该问题
2. 针对前端安全性，由于jsonp使用script的特性第二点，自动解析字符串，所以前端所使用的jsonp接口的数据应该是保证安全可信，防止产生安全隐患漏洞
思维延伸
技术如果不是为了解决问题，那将毫无意义。问题不被解决那就是耍流氓了，所以jsonp所存在的缺点终将被解决——cors跨域解决
2912
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
