JSONP

171 阅读1分钟

最近才搞懂JSONP是怎么回事,记录一下。

JSONP利用了 script 标签不受同源策略限制的特点,相较于 img 标签发起的 get 请求,JSONP 可以获取响应数据(JSON数据)。

后端代码:返回字符串 name({ "name": "K", "age": 17 })

var server = http.createServer(function (req, res) {
  // 返回的数据
  let data = { name: 'K', age: 17 }
  var params = urllib.parse(req.url, true);
  var str = params.query.callback + '(' + JSON.stringify(data) + ')';//jsonp
  res.end(str);
})

前端代码:

<script>
function name(response) {
  let div = document.getElementsByTagName('div')[0];
  div.innerText = response.name;
}
</script>
<!-- 后端返回的字符串会放到下面的标签中,相当于后端调用了前端的回调函数 -->
<script src="http://localhost:3000?callback=name"></script>