JSONP，全称JSON with Padding。为解决 GET 请求跨域。
    跨域常用方案：CORS。
    JSONP 基于两个原理：

    1. 动态生成 script，使用script.src地址来跨域；
    2. script.src 加载的脚本内容为 JSONP：即 PADDING(JSON) 格式。

    注意：在 GET 的 URL 中，查询参数包含callback，callback值是一个方法，方法的 形参 就是获取到的服务端数据。

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>简单 JSONP </title>
    8. </head>
    9. <body>
    10.     <input type="text">
    11.     <button onclick="handleSend()">Send</button>
    12.     <ul class="main">
    13.     </ul>
    14.     <script src="./index.js"></script>
    15.     <script>
    16.         function handleData(res) {
    17.             const liEl = document.createElement('li')
    18.             liEl.innerText = res.msg
    20.             const ulEl = document.getElementsByClassName('main')
    21.             ulEl[0].appendChild(liEl)
    24.             const inputEl = document.getElementsByTagName('input')
    25.             inputEl[0].value = ''
    26.         }
    28.         function handleSend() {
    29.             const inputEl = document.getElementsByTagName('input')
    30.             const sendData = { id: Math.floor(Math.random() * 10), msg: inputEl[0].value || '' }
    32.             jsonp({
    33.                 url: 'http://127.0.0.1:10010',
    34.                 params: sendData,
    35.                 onData: handleData
    36.             });
    37.         }
    38.     </script>
    39. </body>
    40. </html>
    1. function stringify(params) {
    2.     const obj = Object.entries(params)
    3.     const qs = obj.map(([k, v])=>  {
    4.         let noVal = false
    5.         if(v === null || v === undefined || typeof v === 'object') {
    6.             noVal = true
    7.         }
    9.         return `${encodeURIComponent(k)}=${noVal ? '' : encodeURIComponent(v)}`
    10.     }).join('&')
    12.     return qs
    13. }
    15. function jsonp({url, onData, params}) {
    16.     const scriptEl = document.createElement('script')
    18.     // 1.函数随机名称，避免全局污染
    19.     const cbFnName = 'JSONP_PADDING' + Math.random().toString().slice(2)
    21.     // 2.默认 callback 为 cbFnName
    22.     scriptEl.src = `${url}?${stringify({ callback: cbFnName, ...params })}`
    24.     // 3.使用 onData 作为回调函数，接收服务端响应数据
    25.     window[cbFnName] = onData
    27.     document.body.appendChild(scriptEl)
    28. }
    1. const http = require('http');
    2. const url = require('url');
    4. const qs = require('querystring')
    6. const server = http.createServer((req, res) => {
    7.     const {pathname, query} = url.parse(req.url)
    8.     const params = qs.parse(query)
    9.     console.info('params', params)
    11.     const data = {msg: params.msg, id: params.id}
    13.     if(params.callback) {
    14.         const str = `${params.callback}(${JSON.stringify(data)})`
    15.         res.end(str)
    16.     } else {
    17.         res.end()
    18.     }
    19. })
    21. server.listen(10010, () => console.info('server.....'))