json和jsonp

时间 2019-11-07

标签 json jsonp 栏目 JavaScript 繁體版

原文原文链接

1. json

json的全名是JavaScript Object Notation（js对象标记），也就是一种数据结构，多用于数据结构描述。javascript

2. jsonp

jsonp的全称是json with padding（json的衬垫）,就是对json数据作一下其余处理。html

3. jsonp的由来

ajax不容许跨域请求，可是html有个漏洞就是带src标签的东西是能够跨域的，如前端

<script src=""/>
<img src=""/>

jsonp就是基于这个来实现的跨域请求。java

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

node index.js

而后在index.html所在的文件夹下执行ajax

http-server -p 4000

这样一个3000端口，一个4000端口，实现了跨域请求。此时打开index.html，会展现alert('michael')json

7. 后记

以上只是简单实现，若是想在项目中大规模使用须要封装不少东西。若是在开发环境中使用彻底能够使用代理服务器完成，若是真的有跨域的业务，这也是一种解决方案。后端