前言
JSONP(JSON with Padding)是数据格式JSON的一种“使用模式”，可以让网页从别的网域要数据。另一个解决这个问题的新方法是跨来源资源共享。
由于同源策略，一般来说位于server1.example.com的网页无法与 server2.example.com的服务器沟通，而HTML的 <script>元素是一个例外。利用 <script>元素的这个开放策略，网页可以得到从其他来源动态产生的JSON数据，而这种使用模式就是所谓的 JSONP。用JS ONP抓到的数据并不是JSON，而是任意的JavaScript，用 JavaScript解释器运行而不是用JSON解析器解析。
JSONP的历史
由于浏览器同源政策的限制，我们在进行非同源网页的交流时就必须另想办法，JSONP就是方法之一，下面让我们一起看一下演变实现过程：
通过html元素发起请求的方法form（post）、img(get)、a(get)、link(get)、script(get)
1.通过form表单提交发起post请求。
html代码
<button id="button">点我付款</button>
<!--
<form action="./path" method="POST" target="ppp">
<input type="submit" value="点我付款" id="button">
</form>服务器端代码：
if (path == '/path'&&method==="POST") {
response.statusCode=200;
var value = fs.readFileSync('./data', 'utf8')
value--;
fs.writeFileSync('./data', value);
response.setHeader('content-Type', 'text/html'); //用script发送请求
response.write("hello")
response.end();但是form表单有个缺陷，提交时会刷新页面,hello将会显示在一个新的页面中。解决这个方法就是配合ifram标签一起使用，让hello显示在ifram里面，从而避免了本页面的刷新。代码：
<form action="./path" method="POST" target="ppp">
<input type="submit" value="点我付款" id="button">
</form>
<iframe src="about:blank" frameborder="0" name="ppp"></iframe>还有一个方法也可以实现发送请求：动态创建的img，script
我们只需要，让他们指向我们想要发送请求的服务器的指定路径即可。
1.动态的创建img
代码：
html
<h1>这是我的第一个页面</h1>
<p>您的余额还有：<span id="amount">$number</span></p>
<button id="button">点我付款</button>js
let img =document.createElement('img');
img.src = "./path";
img.onload=function(){
//alert("付款成功")
//window.location.reload();
amount.innerText--;
}
img.onerror=function(){
alert("付款失败")
}这里注意服务器要返回一个图片，否则图片会显示加载失败。
2.动态的创建一个script元素（script不受域名的限制）向指定服务器的路径发送请求。
script是不受任何域名的限制的，因此一个网站的可以使用另一个网站的js
js
let script=document.createElement('script');
script.src="./path";
document.body.appendChild(script);//插入页面之后才会发起请求
script.onload=function(e){
e.currentTarget.remove();//删除响应成功之后我们动态添加的script
}
script.onerror=function(e){
e.currentTarget.remove();//删除响应不成功之后动态添加的script
}
服务器代码
if(path == '/main.js'){
response.statusCode = 200;
var string =fs.readFileSync('./main.js','utf8');
response.setHeader('Content-Type', 'application/javascript');
response.write(string);
response.end();
} else if (path == '/path') {
response.statusCode=200;
var value = fs.readFileSync('./data', 'utf8')
value--;
fs.writeFileSync('./data', value);
response.setHeader('content-Type', 'application/javascript'); //用script发送请求
response.write(`amount.innerText = amount.innerText-1;`)
response.end();于是我们实现了，无刷新局部更新内容方案。这种技术叫做 SRJ - Server Rendered JavaScript，跨域 SRJ。
JSONP就是基于这种方法向来获取非同源的网页获取所需要的数据。实现了两个网站之间的交流。
假设我们在http://localhost:8001/index.html打开了一个页面，我们动态添加的script的src如下：
script.src = "http://localhost:8002/path";这样我们就实现了在http://localhost:8001向http://localhost:8002非同源发送请求；
！！这里我们要注意了，JSONP是根据动态的创建script来实现的，因此，JSONP只能只能发送get请求不能发送post请求。
但是这样耦合性太大，相互影响。因此我们在请求中传过去一个我们自定义的全局方法，后端程序元只需要通过这个方发传回来我们要的参数即可。
js
script.src = `http://localhost:8002/path?callbackName=callback`;服务器代码
response.write(`${query.callbackName}.call(null,"succed")`)
JSONP
请求方：frank.com 的前端程序员（浏览器）
响应方：jack.com 的后端程序员（服务器）
请求方创建 script，src 指向响应方，同时传一个查询参数 ?callbackName=yyy
响应方根据查询参数callbackName，构造形如
yyy.call(undefined, ‘你要的数据’)
yyy(‘你要的数据’)
这样的响应
浏览器接收到响应，就会执行 yyy.call(undefined, ‘你要的数据’)
那么请求方就知道了他要的数据
这就是 JSONP
JSONP
utton.addEventListener('click', (e)=>{
let script = document.createElement('script')
let functionName = 'frank'+ parseInt(Math.random()*10000000 ,10)
window[functionName] = function(){ // 每次请求之前搞出一个随机的函数
amount.innerText = amount.innerText - 0 - 1
}
script.src = '/pay?callback=' + functionName
document.body.appendChild(script)
script.onload = function(e){ // 状态码是 200~299 则表示成功
e.currentTarget.remove()
delete window[functionName] // 请求完了就干掉这个随机函数
}
script.onload = function(e){ // 状态码大于等于 400 则表示失败
e.currentTarget.remove()
delete window[functionName] // 请求完了就干掉这个随机函数
}
})//后端代码
…
if (path === '/pay'){
let amount = fs.readFileSync('./db', 'utf8')
amount -= 1
fs.writeFileSync('./db', amount)
let callbackName = query.callback
response.setHeader('Content-Type', 'application/javascript')
response.write(`
${callbackName}.call(undefined, 'success')
`)
response.end()
}…
约定：
callbackName -> callback
yyy -> 随机数 frank12312312312321325()
Jquery使用JSONP
$.ajax({
url: "http://jack.com:8002/pay",
dataType: "jsonp",
success: function( response ) {
if(response === 'success'){
amount.innerText = amount.innerText - 1
}
}
})