JSONP

一、概念
1.JSONP：使用<script> 元素作为Ajax传输的技术。若HTTP请求所得到的响应数据是经过JSON编码的，则适合使用该技术。

2.<script> 元素作为Ajax传输机制：只须设置<script> 元素的src属性，然后浏览器就会发送一个HTTP请求以下载src属性所指向的URL。

3.使用<script> 元素进行Ajax传输的原因：

• 它不受同源策略的影响，因此可以使用它们从其他的服务器请求数据。
• 包含JSON编码数据的响应体会自动解码（自动执行）。

4.情况：假设你已经写了一个服务，它处理GET请求并返回JSON编码的数据。

• 同源的文档可以在代码中使用XHR和JSON.parse()。
• 假如在服务器上启用了可用的CORS，跨域的文档也可以使用XHR享受到该服务。
• 在不支持CORS的情况下，跨域文档只能通过<script> 元素访问这个服务，即使用JSONP。

5.JSONP中的P含义：当通过<script> 元素调用数据时，响应内容必须用JS函数名和圆括号包裹起来。

//一段JSON数据
[1,2,{"buckle","my shoe"}]

//JSONP应当传送的数据
handleResponse(
	[1,2,{"buckle","my shoe"}]
)

---

二、JSONP的具体实现：
参考优快云文章《简单透彻理解JSONP原理及使用》 中的例子。

“JSONP将访问跨域请求变成了执行远程JS代码，服务端不再返回JSON格式的数据，而是返回了一段将JSON数据作为传入参数的函数执行代码。”

---

三、jQuery提供了方便使用JSONP的方式

//js
$(document).ready(function(){
	$.ajax({
		type : "get",
        async: false,
        url : "http://www.example.com/example.php?id=1",
        dataType: "jsonp",
        jsonp:"callback", //请求php的参数名
        jsonpCallback: "jsonhandle",//要执行的回调函数
        success : function(data) {
            alert("age:" + data.age + "name:" + data.name);
        }
	});
});

//php
<?php
$data = array(
    'age' => 20,
    'name' => '张三',
);
$callback = $_GET['callback'];
echo $callback."(".json_encode($data).")";
return;

——阅读《Javascript权威指南》第18章
——参考文章 https://blog.youkuaiyun.com/u011897301/article/details/52679486