全栈：JSONP

什么是JSONP

JSON with padding

举个例子：

前端提前设置一个函数，假设函数名为fn 然后把fn 这个字符串用script标签的src属性发送给后端
后端解析出参数querystring中的fn字符串，把后端的JSON数据拼接成'fn（JSON数据）'这个字符串发送给前端
前端因为使用script 的src 请求的资源，因此不会有跨域限制，并且会把得到的资源用v8去运行 然后就会执行fn函数
如果设定好的函数fn1就可以接受到网络请求的数据 这种利用了script去跨域请求就是JSONP

 

JSONP的原理

jsonp的核心原理就是目标页面回调本地页面的方法,并带入参数

1、利用script的src属性没有跨域限制，会将引用的外部文件通过js解析，将服务器的资源添加到当前路径进行解析
2、提前创建好这个函数，当script标签解析这个网址时能够直接运行函数，调用函数；后端获取到前端声明的函数就会执行callback，并传递给前端
3、前端通过querystring吧函数名以参数形式发送给后端，后端解析后拼接到数据中

 

例：创建函数拼接

　　　　　　　function fn2(){
                var name="hello"+new Date().getTime()
                window[name]=function(arg){
                console.log(arg)
                }
                var script1=document.createElement("script")
                script1.src=`https://api.weibo.com/2/statuses/home_timeline.json?access_token=2.00ZmCkcDlel8HDd856f9b9ccsVwsYD&callback=${name}`  
　　　　　　　　　 document.body.append(script1) 
　　　　　　  }

 

    var obj={对象}
    var str=JSON.stringify(obj)//把对象转成JSON字符串
    let query1=url.parse(req.url).query
    var querobj=querystring.parse(query1)   //JSON对象
    res.end(`${querobj.callback}(${str})`)//callback可以是任意自定义函数等