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);