JSONP 介绍
介绍
维基百科已经介绍的很透彻了，不多废话，请仔细品尝。
JSONP（JSON with Padding）是资料格式JSON的一种“使用模式”，可以让网页从别的网域获取资料。另一个解决这个问题的新方法是跨域源资源共享。
由于同源策略，一般来说位于server1.example.com的网页无法与 server2.example.com的服务器沟通，而HTML的<script>元素是一个例外。利用<script>元素的这个开放策略，网页可以得到从其他来源动态产生的JSON资料，而这种使用模式就是所谓的 JSONP。用JSONP抓到的资料并不是JSON，而是任意的JavaScript，用 JavaScript解释器执行而不是用JSON解析器解析。
试验
看完上面的介绍，可能有点懵，它的实际执行过程是什么？请看下面的代码
// 客户端（浏览器）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
</head>
<body>
<div id="divCustomers"></div>
<script type="text/javascript">
function callbackFunction(result, methodName)
{
var html = '<ul>';
for(var i = 0; i < result.length; i++)
{
html += '<li>' + result[i] + '</li>';
}
html += '</ul>';
document.getElementById('divCustomers').innerHTML = html;
}
</script>
<script type="text/javascript" src="http://127.0.0.1:3000?jsoncallback=callbackFunction"></script>
</body>
</html>
// 服务端
const koa = require('koa')
const app = new koa()
app.use(async (ctx)=>{
ctx.body = `${ctx.query.jsoncallback}(["customername1","customername2"])`
})
app.listen(3000,()=>{
console.log('已启动');
})
这里没有使用https协议也没有域名，这是模仿一个“跨域的操作”，运行过程中urlhttp://127.0.0.1:3000?jsoncallback=callbackFunction的response结果是字符串callbackFunction(["customername1","customername2"])（此时浏览器会判定此字符串是js脚本并执行它）会调用浏览器中的function callbackFunction(result, methodName)函数，最后渲染结果是
// 浏览器渲染之后
· customername1
· customername2
最后再看一段维基百科的补充说明
虽然这个填充（前辍）“通常”是浏览器执行背景中定义的某个回调函数，它也可以是变量赋值、if叙述或者是其他JavaScript叙述。JSONP要求（也就是使用JSONP模式的请求）的回应不是JSON也不被当作JSON解析——回传内容可以是任意的表达式，甚至不需要有任何的JSON，不过惯例上填充部分还是会触发函数调用的一小段JavaScript片段，而这个函数调用是作用在JSON格式的资料上的。
另一种说法—典型的JSONP就是把既有的JSON API用函数调用包起来以达到跨域访问的解法。
