0x00 前置知识

1. SOP（Same Origin Policy）

来源 1	来源 2	交互结果	限制
http://example.com	http://example.com	同源，交互被允许	无限制
http://example.com	http://example.com:8080	不同端口，交互被阻止	同源策略阻止
http://example.com	https://example.com	不同协议，交互被阻止	同源策略阻止
http://example.com	http://sub.example.com	不同子域，交互被阻止	同源策略阻止
http://example.com	http://other.com	不同域名，交互被阻止	同源策略阻止
http://example.com	https://example.com:8080	不同协议和端口，交互被阻止	同源策略阻止

SOP，全称为同源策略 (Same Origin Policy)，该策略是浏览器的一个安全基石，如果没有同源策略，那么，你打开了一个合法网站，又打开了一个恶意网站。恶意网站的脚本能够随意的操作合法网站的任何可操作资源，没有任何限制。浏览器要严格隔离两个不同源的网站，目的是保证数据的完整性和机密性。

浏览器的同源策略规定：不同域的客户端脚本在没有明确授权的情况下，不能读写对方的资源。那么何为同源呢，即两个站点需要满足同协议，同域名，同端口这三个条件。

当浏览器发现有一个跨域的请求，但是它在服务器的返回头中如果没有发现
Access-Control-Allow-Origin 值允许 http://x.x.x.x 的访问，那么便会将其给拦截。
那么虽然浏览器受到了同源策略的限制，不允许实现跨域访问，但是由于在开发过程中，其中的前后端的交互过程中不可避免会涉及到跨域的请求（设计同源策略的人想必也发现了这个问题），于是设计者给我们留了一个后门，就是只要服务器响应头中返回允许这个源的选项，那么跨域请求就会成功。（这里纠正一个误区，不要认为浏览器默认支持同源策略就意味着不同源的请求就不能发出去，其实还是能发出去的，只是要看响应头）

在页面中有几个东西是对同源策略免疫的，有 <img> 的src 、<link> 的 href 还有就是<script>的 src , 那么JSONP 就是利用其中的 <script> 标签的sec 属性实现跨区域请求的。
<script>标签的请求不论是不是同源一律不受同源策略的限制，那我们就找到了解决跨域访问的方法。
这里我们用一个例子来更加直观的展示：
getUser.php代码如下：

<?php
header('Content-type: application/json');
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);//获取回调函数名
//json数据
//$json_data = '["id","user"]';
$json_data='({"id":"1","name":"Aaron"})';
echo $jsoncallback . "(" . $json_data . ")";//输出jsonp格式的数据
?>

2.JSONP

JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。
JSONP实现跨域请求的原理简单的说，就是动态创建<script>标签，然后利用<script>的src 不受同源策略约束来跨域获取数据。

JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。

动态创建<script>标签，设置其src，回调函数在src中设置：

var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);

在页面中，返回的JSON作为response参数传入回调函数中，我们通过回调函数来来操作数据。

function handleResponse(response){
// 对response数据进行操作代码
}