JSONP的历史方案和实现原理

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。