JSONP实践

2018-06-24  本文已影响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脚本可以跨域请求的特性,将客户端用于处理结果的函数的函数名传递给服务端,服务端返回一个脚本文件,脚本文件的内容是函数名执行+请求结果作为函数参数。这样客户端在加载完这个脚本后会执行该脚本,调用处理结果的函数。

上一篇 下一篇

猜你喜欢

热点阅读