JSONP学习笔记

1. parseInt(n,10)

以10进制的方式把字符串n转换为整型

2. git 回到以前的状态

git log
git reset 7fagfgdfgdfgdsf --hard

3. 随机数

Math.random() > 0.5

4. 图片加载成功和图片加载失败

image是图片便签
image.onload = function(){
    加载成功就执行这里的代码
}
imgae.onerror = function(){}

5. 怎么刷新当前页面？

window.location.reload()

6. 怎么用图片发请求？

利用图片的src发送get请求，不过注意要返回一个真的图片

7. 通过script的src也可以发请求

不过要在body里面创建script标签，并且注意server.js里要写application/javascript。好处是不用发送一张图片。这个方案叫SRJ：server render JavaScript

8. 监听一个标签，成功加载后就删掉

label.onload = function(e){
    e.currentTarget.remove()
}

9. srj只能用get请求。

10. script的src可以向不同源的网站发送请求。

11. 为什么JSONP不支持POST方法？

1. 因为JSONP的原理是通过动态地创建script标签来发送数据
2. 我们动态创建script的时候只能用get，不能用POST

JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

12. 什么是jsonp

JSONP是服务器与客户端跨源通信的常用方法。
最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。
它的基本思想是，网页通过添加一个script元素，向服务器请求json数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定的回调函数里传回来。

JSONP

请求方：frank.com 的前端程序员（浏览器）
响应方：jack.com 的后端程序员（服务器）

请求方创建 script，src 指向响应方，同时传一个查询参数 ?callbackName=yyy
响应方根据查询参数callbackName，构造形如yyy.call(undefined, '你要的数据')
yyy('你要的数据')这样的响应.
浏览器接收到响应，就会执行 yyy.call(undefined, '你要的数据')
那么请求方就知道了他要的数据
这就是 JSONP

约定：

callbackName -> callback
yyy -> 随机数 frank12312312312321325()
jQuery 用法

 $.ajax({
 url: "http://jack.com:8002/pay",
 dataType: "jsonp",
 success: function( response ) {
     if(response === 'success'){
     amount.innerText = amount.innerText - 1
     }
 }
 })

13.实现yjq.com向mayun.com发送请求

---

1. 在yjq.com:8001处发送http://localhost:8002/pay请求

pay.addEventListener('click', function (e) {
            var script = document.createElement('script')
            document.body.appendChild(script)
            script.src = 'http://localhost:8002/pay'
            e.curretTarget.remove()
        })

2. 在mayun.com的server.js处修改代码：

if(path === '/pay'){
            response.statusCode = 200
            var number = fs.readFileSync('./db','utf-8')
            var newNumber = number - 1
            fs.writeFileSync('./db',newNumber)
            response.setHeader('Conttent-Type','application/javascript')
            response.write(`
            alert('这是来自jmayun.com的代码')
            `)
            response.end()

3. 最后开启两个server.js，成功接收到来自mayun.com的代码
   [图片上传失败...(image-ad72f6-1553065991823)]

---

14. 总结

前端一开始只能使用form表单向服务器发送请求，但后来发现用img标签的src也发送get请求，但用img发送请求还需要返回一张图片，因此又使用动态地创建script元素来发送请求，衍生出了JSONP。由于script标签的src是可以跨域的，因此jsonp发送的请求也是可以跨域发送，且对老式浏览器兼容。