json和jsonp
1. json
json的全名是JavaScript Object Notation（js对象标记），也就是一种数据结构，多用于数据结构描述。
2. jsonp
jsonp的全称是json with padding（json的衬垫）,就是对json数据做一下其他处理。
3. jsonp的由来
ajax不允许跨域请求，但是html有个漏洞就是带src标签的东西是可以跨域的，如
<script src=""/> <img src=""/>
jsonp就是基于这个来实现的跨域请求。
4. jsonp前端原生实现
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function cb(data) {// 默认回调函数是cb
alert(data.name);
}
</script>
<script src="http://127.0.0.1:3000?callback=cb"></script>
</body>
</html>5. jsonp后端实现
// index.js
var http = require('http');
http.createServer((req, res) => {
res.writeHead(200, {
'content-type': 'text/json;charset=utf-8'
});
var data = {
"name": "michael"
};
data = JSON.stringify(data);
//假设我们定义的回调函数名为cb
var callback = 'cb' + '(' + data + ');';
res.end(callback);
}).listen(3000);6. 运行
首先在index.js所在的文件夹下执行
node index.js
然后在index.html所在的文件夹下执行
http-server -p 4000
这样一个3000端口，一个4000端口，实现了跨域请求。此时打开index.html，会展示alert('michael')
7. 后记
以上只是简单实现，如果想在项目中大规模使用需要封装很多东西。如果在开发环境中使用完全可以使用代理服务器完成，如果真的有跨域的业务，这也是一种解决方案。
相关推荐
fengchao000 2020-06-17
adonislu 2020-05-16
zmosquito 2020-05-10
adonislu 2020-05-10
somebodyoneday 2020-04-22
fengchao000 2020-04-22
fengchao000 2020-04-11
Richardxx 2020-03-07
somebodyoneday 2020-03-06
fengchao000 2020-03-05
somebodyoneday 2020-02-16
xiaouncle 2020-02-13
baijinswpu 2020-01-29
fengchao000 2020-01-10
fengchao000 2019-12-25
newthon 2019-12-23
somebodyoneday 2013-07-11