1. JSONP的实现原理
JSONP是通过动态创建script实现的。
请求方：frank.com 的前端程序员（浏览器）。
响应方：jack.com 的后端程序员（服务器）。
(1).请求方创建 script, src 指向响应方，同时传入一个查询参数 ?calbackName=yyy。
(2).响应方根据查询参数callbackName,构造性如：
(一).yyy.call(undefined,'你要的数据')
(二).yyy('你要的数据')
这样的响应。
(3).浏览器接收到响应，就会执行 yyy.call(undefined,'你要的数据')。
(4).那么请求方就知道了他要的数据。
整个过程就是JSONP的实现过程。
2. JSONP相关历史方案
例子：用数据库做加法
一个简易的server服务器
代码：版本1
做一个点击button,价格减1的demo，没有和数据库进行交互
代码：没有数据库的版本
2.1 利用form请求数据
增加数据库文件db.txt，与数据库进行交互
修改html,利用form表单post方法发送数据，请求路径 /pay,方法 post，点击提交按钮，金额减一。
新建db.txt，内容为100
修改db.txt，增加端口'/pay'，使得网页每次请求，金额减一。
效果，点击提交后，点击后退按钮，刷新页面，金额是会减一。
代码：添加数据库的版本
修改server.js,添加随机数，让求情可能成功可能失败。
代码：随机请求的版本
细节：每次点击提交form，页面都会刷新,如何优化?
古老的方法：利用iframe代替页面刷新
修改index.html，让form的target指向iframe
代码：利用iframe代替页面刷新
如何不用iframe?
2.2 利用 image发送请求
不用form创建请求，而利用image来发请求
创建image，放在内存中，浏览器发现就会立即请求img的source
修改index.html, 在script标签中创建img元素，并让img.src='./pay'，添加img.onload和onerror，根据状态码显示失败或成功
修改server.js, 删除if条件必须是post,给响应添加状态码，成功响应200，失败响应400
结果：只能显示失败，重要的的是理解利用image来发请求的思路
代码：利用image来发请求
解决bug，我们并没有如真正的图片所以失败了，只需要给服务器一张真的图片即可（1X1的空白像素）
这里用随意一张图片代替
修改server.js,‘./pay’接口的if成功区块
response.setHeader('Content-Type','img/jpg')
response.write(fs.readFileSync('./dog.jpg'))
代码：修改img发送请求的bug
代码：利用winodw.reload()请求成功后自动刷新
修改index.html，打钱成功后，添加window.location.reload()实现请求成功后的自动刷新但这样会重新加载页面，我们需要的是页面局部更新
修改index.html,删除window.locaiton.reload(),添加amount.innerText = amount.innerText - 1
这样我们在服务器数据更改的同时，页面上显示的数据也实现了更新。
代码：页面局部更新
2.3 利用script发送请求
利用script发请求
修改index.html,创建script，script.src等于接口，并且需要将创建的script插入到body中，不然不起作用。
修改server.js的数据传输类型为 application/javascript
代码：利用script发请求
每次我们点击提交时，都会新创建一个script标签插入到页面中
修改server.js，pay接口，成功时写入‘我是pay’
由于页面中出现了script标签，浏览器就会将这个script执行掉，而它里面的内容就是alert('我是pay')，执行完之后再去调用onload事件。
代码：插入页面的script标签会被执行
修改server.js，去掉响应失败，全部响应成功，如果成功，则弹出对话框‘我是pay’
代码：先执行响应内容，然后调用onload
删除onload，通过response.write对页面数字进行更改，形成比较简洁的方案
代码：利用response.write()
每次提交都会添加script标签，我们可以删掉
修改index.html,
添加script.onload = function(e) {
e.currentTarget.remove()
}
代码：删掉动态添加的script标签
2.4 SRJ
这个方案名：SRJ Server rendered javascript 服务器返回的javascirpt，在ajax出来以前，程序员想出来的，无刷新局部更新页面内容的方案。
2.5 请求另一个网站的script
请求另一个网站的script
两个网站通过SRJ相互访问。
修改hosts,命令行 vi /etc/hosts ，让frank.com和jack.com等价于127.0.0.1
修改hosts参考链接https://jingyan.baidu.com/article/b907e627d86be046e6891c41.html
在最后面添加
127.0.0.1 frank.com
127.0.0.1 jack.com
监听8001端口的网站 命令行 node server.js 8001
监听8002端口的网站 命令行 node server.js 8002
打开窗口通过，打开frank.com:8001和jack.com:8002，它们是两个不同的网站
修改index.html,script.src = 'http://jack.com:8002/pay'
点击8001的打钱按钮，服务器返回的是8002对应服务器的数据。
代码：两个网站SRJ相互访问
这个方案的缺点，后端对前端的了解太深入了，耦合程度太高，所以需要解耦
修改index.html
window.xxx = function(result) {
if(result === 'success') {
amount.innerText = amount.innerText - 1
} else {
}
}
script.src = 'http://jack.com:8002/pay?callbackName=xxx'
修改server.js
${query.callbackName}.call(undefined,'success') 这样来解耦，这样后端不许要知道前端的细节，只需要给结果就行了。
script不受域名限制，ajax受域名限制
代码：前后端解耦
2.6 JSONP的由来
JSONP的由来，{}左边加左padding，右边叫右padding，简称JSONP。。。。。
也就是JSON+padding=JSONP
如果是String的话，也可以是String + padding = StringP
代码：JSONP的由来
3. JSONP
JSONP
请求方：frank.com 的前端程序员（浏览器）。
响应方：jack.com 的后端程序员（服务器）。
(1).请求方创建 script, src 指向响应方，同时传入一个查询参数 ?calbackName=yyy。
(2).响应方根据查询参数callbackName,构造性如：
(一).yyy.call(undefined,'你要的数据')
(二).yyy('你要的数据')
这样的响应。
(3).浏览器接收到响应，就会执行 yyy.call(undefined,'你要的数据')。
(4).那么请求方就知道了他要的数据。
这就是JSONP
3.1 约定
约定：
1.callbackName -> calllback
2.yyy -> 随机数 frank18375912375()
一个符合约定的JSONP
随机数每次调用完，都及时销毁，不占用全局变量
代码：一个符合约定的JSONP
3.2 使用jquery实现JSONP
只需要确定url的值,dataType的值是jsopn,响应成功后做什么；不用管后台如何调用。
注意：JSONP不是ajax,只是jquery把JSONP归为ajax的方法里面去了。
button.addEventListener('click', (e)=>{
$.ajax({
url: "http://jack.com:8002/pay",
dataType: "jsonp",
success: function(response) {
if(response === 'success') {
amount.innerText = amount.innerText - 1
}
}
})
})
这个方法和ajax没关系，它只是简化了JSONP的整个过程
代码：jquery实现JSONP
3.3 JSOPN误导
1.名字会误导你，让你以为它和JSON有关系
2.jquery会误导你，让你以为它和ajax有关系
4. 面试题
4.1 什么是 JSONP？
JSONP
请求方：frank.com 的前端程序员（浏览器）。
响应方：jack.com 的后端程序员（服务器）。
(1).请求方创建 script, src 指向响应方，同时传入一个查询参数 ?calbackName=yyy。
(2).响应方根据查询参数callbackName,构造性如：
(一).yyy.call(undefined,'你要的数据')
(二).yyy('你要的数据')
这样的响应。
(3).浏览器接收到响应，就会执行 yyy.call(undefined,'你要的数据')。
(4).那么请求方就知道了他要的数据。
这就是 JSONP
约定：
1. callbackName -> callback
2. yyy -> 随机数 frank12312312312321325()
3. jQuery 用法
$.ajax({
url: "http://jack.com:8002/pay",
dataType: "jsonp",
success: function( response ) {
if(response === 'success'){
amount.innerText = amount.innerText - 1
}
}
})
4.2 请问 JSONP为什么不支持POST请求（99%）
因为JSONP是通过动态创建script实现的，而动态创建script的时候只能用get没有办法用post。