原理:<script>标签是一个很古老的标签,带有src属性,而src能访问任何域。 前端代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function handeEvent (data) {
console.log(data,'接收到后台返回来的数据')
}
//创建script元素
const scriptDom = document.createElement('script');
//添加.src属性,赋值就是就是你想访问的协议、域名、端口。
//拼接参数callback=handeEvent
scriptDom.src = `http://localhost:3000/detail_test?callback=handeEvent`
//将scriptDom追加进body元素中。
document.body.append(scriptDom)
</script>
</body>
</html>
node.js代码:
//引入http服务
const http = require('http');
const querystring = require('querystring')
//创建服务
const server = http.createServer((req, res)=>{
const path = req.url.split('?')[0];
req.path = path;
const query = req.url.split('?')[1];
req.query = querystring.parse(query)
if (req.method === "GET" || path=== "/detail_test") {
let person = {
name: 'zs',
age: 18
}
//取出callback属性,就是前端传过来的
//req.query.callback就是前端的handeEvent函数,拼接括号跟参数,返回给给前端
let callback2 = req.query.callback+'('+ JSON.stringify(person)+')'
res.end(callback)
}
})
server.listen(3000, ()=>{
console.log('OK')
})