关于 jsonp 的一些疑问

Question

想知道，在利用 jsonp 实现跨域的时候，在服务端返回数据，把数据作为参数放到回调函数中

`callback(JSON.stringify(data))`

但是此时服务端返回的应该是个字符串呀，浏览器是如何直接把这个返回的字符串当成 js 代码执行的？

完整代码如下

// js
function jsonp (url) {
      // 创建 script 标签
      var script = document.createElement('script')  
      script.src = url
      script.id = 'jsonp'
      document.getElementsByTagName('body')[0].appendChild(script)

      // 移除标签，清除占用内存
      script.onload = () => {
        document.getElementsByTagName('body')[0].removeChild(script)
        script = null
      }
    }
    
    function sendHaha (msg) {
      console.log(msg)
    }
    
    jsonp('http://localhost:3333/haha?callback=sendHaha')

// 服务端
var http = require('http')
var urllib = require('url')

var data = {
  data: 'hhh'
}

http.createServer((req, res) => {
  var params = urllib.parse(req.url, true)
  var callback = params.query.callback
  if (callback) {
    var str = `${callback}(${JSON.stringify(data)})`
    res.end(str)
  }
}).listen(3333, () => {
  console.log('haha')
})

谢谢大佬的解答~~感激不尽

Answer 1

不明白为什么会有这样的疑问
本来写在script的代码就会自动编译执行
平时写js

//a.js
callback(123)

页面引用

<script>
   function callback(p){
        console.log(p)//123
    }
</script>

//获取a.js 内容 获取到的是字符串：callback(123) 解析并执行
<script src="a.js"></script>

你现在等于把 a.js 的内容用后台控制返回 只是换层皮

var script = document.createElement('script');
script.id = 'jsonp'
script.innerHTML = 'callback(123)'
document.getElementsByTagName('body')[0].appendChild(script)

Answer 2

${callback}(${JSON.stringify(data)})改成:

`${callback}({${JSON.stringify(data)}})`

刚才我写错了，你不用该的，
你只需要再你回调方法里处理就行了：

function sendHaha (msg) {
      var data = JSON.parse(msg);
    }