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服务器 代码： 做一个点击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?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来发请求的思路 代码： 解决bug，我们并没有如真正的图片所以失败了，只需要给服务器一张真的图片即可（1X1的空白像素） 这里用随意一张图片代替 修改server.js,‘./pay’接口的if成功区块response.setHeader('Content-Type','img/jpg')response.write(fs.readFileSync('./dog.jpg'))复制代码 代码：
代码： 修改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标签插入到页面中 修改server.js，pay接口，成功时写入‘我是pay’ 由于页面中出现了script标签，浏览器就会将这个script执行掉，而它里面的内容就是alert('我是pay')，执行完之后再去调用onload事件。 代码： 修改server.js，去掉响应失败，全部响应成功，如果成功，则弹出对话框‘我是pay’ 代码： 删除onload，通过response.write对页面数字进行更改，形成比较简洁的方案 代码： 每次提交都会添加script标签，我们可以删掉修改index.html,添加script.onload = function(e) { e.currentTarget.remove() }复制代码 代码：
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对应服务器的数据。 代码： 这个方案的缺点，后端对前端的了解太深入了，耦合程度太高，所以需要解耦修改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 代码：3. JSONP
JSONP
请求方：frank.com 的前端程序员（浏览器）。 响应方：jack.com 的后端程序员（服务器）。 (1).请求方创建 script, src 指向响应方，同时传入一个查询参数 ?calbackName=yyy。 (2).响应方根据查询参数callbackName,构造性如： (一).yyy.call(undefined,'你要的数据') (二).yyy('你要的数据') 这样的响应。 (3).浏览器接收到响应，就会执行 yyy.call(undefined,'你要的数据')。 (4).那么请求方就知道了他要的数据。 这就是JSONP3.1 约定
约定：
1.callbackName -> calllback 2.yyy -> 随机数 frank18375912375() 一个符合约定的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的整个过程
代码：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。