美文网首页
JSONP实践

JSONP实践

作者: 围观工程师 | 来源:发表于2018-06-24 00:32 被阅读0次

    跨域一直使用CORS,JSONP大概知道,但没有实践过。这次来实践一下。

    前端代码

    window.addEventListener('DOMContentLoaded', function() {
      ajax({
        url: '/jsonp',
        params: {
          p: '前端参数'
        },
        callback: function (data) {
          alert(data)
        }
      })
    })
    
    function ajax ({url, params, callback}) {
      const script = document.createElement("script");
      script.type = "text/javascript";
      window.callback = callback
      let s = '&'
      for (let [key, val] of Object.entries(params)) {
        if (typeof val === 'object') {
          s += (key + '=' + JSON.stringify(val) + '&')
        } else {
          s += (key + '=' + val + '&')
        }
      }
      s.slice(0, s.length - 1)
      url = url + '?funName=window.callback' + s;
      script.src = url + '?funName=window.callback';
      script.text = '!' + callback.toString() + '()';
      document.body.appendChild(script);
    }
    

    后台代码(Express)

    router.get('/jsonp', function(req, res, next) {
      let p = req.query.p
      let funName = req.query.funName
      let s = funName + '("' + p + '")'
      res.writeHead(200, {
        'Content-Length': Buffer.byteLength(s),
        'Content-Type': 'application/javascript'
      });
      res.write(s)
      res.end()
    });
    

    总结

    利用script脚本可以跨域请求的特性,将客户端用于处理结果的函数的函数名传递给服务端,服务端返回一个脚本文件,脚本文件的内容是函数名执行+请求结果作为函数参数。这样客户端在加载完这个脚本后会执行该脚本,调用处理结果的函数。

    相关文章

      网友评论

          本文标题:JSONP实践

          本文链接:https://www.haomeiwen.com/subject/asxjyftx.html