使用script标签是如何实现跨域请求的,它是一个新技术,还是一个技巧?
下面我们来看看,其中简单的原理:
我们写一个很平常的example.js,文件内容展示如下:
getJson({
results: [
{
name: 'xxx',
code: 1
}
]
});
接下来,再写一个简单的index.html文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jsonp</title>
<script>
function getJson(data) {
console.log(data);
}
</script>
<script src="http://127.0.0.1:3000/example.js"></script>
</head>
<body></body>
</html>
上面的index.html代码,当成功的请求到example.js后,相当于这样:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jsonp</title>
<script>
function getJson(data) {
console.log(data);
}
</script>
<script>
// 这里是:src="http://127.0.0.1:3000/example.js"请求成功后,返回的代码(数据)
getJson({
results: [
{
name: 'xxx',
code: 1
}
]
});
</script>
</head>
<body></body>
</html>
相信写到这里,是能看得明白的,下面正式开始说JSONP的实现,我用的是nodejs后台:
前端代码index.html,给"http://http://127.0.0.1:3000/example.js"请求地址加一个get请求参数?callback=getJson,代码示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jsonp</title>
<script>
function getJson(data) {
console.log(data);
}
</script>
<script src="http://127.0.0.1:3000/example.js?callback=getJson"></script>
</head>
<body></body>
</html>
后端server.js代码如下:
const express = require('express');
const server = express();
server.use('/example.js', (req, res) => {
// req.query.callback是getJson
let methodName = req.query.callback;
let data = {
results: [
{
name: 'xxx',
code: 1
}
]
};
let dataStr = JSON.stringify(data),
// 相当于sendStr = `getJson(${dataStr})`
sendStr = `${methodName}(${dataStr})`;
res.send(sendStr);
});
server.listen(3000);
console.log('server running at 127.0.0.1:3000');
当<script src="http://127.0.0.1:3000/example.js?callback=getJson"></script>请求成功后,index.html代码解析如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jsonp</title>
<script>
function getJson(data) {
console.log(data);
}
</script>
<script>
// 这里是:src="http://127.0.0.1:3000/example.js?callback=getJson"请求成功后,返回的代码(数据)
getJson('{"results":[{"name":"xxx","code":1}]}')
</script>
</head>
<body></body>
</html>
最后声明,为了方便大家理解,我把请求写成了一个example.js,其实接口只要一个字符串就可以了,例如"http://127.0.0.1:3000/example?callback=getJson",其中.js文件格式,完全是为了帮助大家理解。
网友评论