JSONP

通过跨域去请求服务端数据
需要客户端与服务端
必须违反同源协议：同协议 同域名 同端口

客户端：
通过script标签的src向不同的服务器请求数据
只能以get方式请求数据
src：它是一种资源请求， 不存在跨域
script标签：它引入的是js 并且将js执行一遍

封装一个方法（jsonp）
通过传入请求路径(url) 以及预先协商好的回调函数名字（callbackName）请求数据

function jsonp(url, callbackname) {

需要动态创建script标签

let script = document.createElement('script');

给script标签添加src路径 = url + 回调函数 + 回调函数名字

script.src = url + '?callback=' + callbackname

将创建的script标签插入body

document.body.appendChild(script);
}

调用jsonp传入url以及callbackName

jsonp('http://127.0.0.1:3000/jsonp', 'aa');

回调函数响应服务端数据

function aa(data) {
        console.log(data)
    }

服务端思路：

引入http模块—>创建服务，监听端口-->获取客户端请求路径，引入 url模块—>实例化URL获取客户端请求路径, 并将路径附给一个变量AppUrl—>通过AppUrl.pathname判断请求的路径—>通过AppUrl.searchParams.get()获取回调函数名字—> res.end响应前端数据，通过回调函数将数据返回给客户端预先定义好的callback函数里

引入模块：

const http = require('http');
const {URL} = require('url');

创建服务，监听端口

http.createServer((req, res)=> {
    const appUrl = new URL('http://127.0.0.1:3000' + decodeURIComponent(req.url));
    if(appUrl.pathname === '/jsonp') {
        // 获取到预先定义好的callback函数名字
        let callbackName = appUrl.searchParams.get('callback');
        res.end(callbackName + '(' + JSON.stringify({name: 123, age: 18}) + ')')
    }
}).listen(3000, err=> {
    console.log('服务启动成功')
})

今天的分享就到这里啦，如有错误，欢迎不吝指出，笔芯~