JSONPJSONP（JSON with Padding）是一种跨域数据请求的技术，主要用于解决浏览器的同源策略限制。J

JSONP（JSON with Padding）是一种跨域数据请求的技术，主要用于解决浏览器的同源策略限制。JSONP 的工作原理是利用 <script> 标签不受同源策略限制的特点，通过动态插入 <script> 标签来请求跨域数据。

JSONP 的基本原理

客户端：客户端通过动态插入 <script> 标签发起请求，并在请求的 URL 中附加一个回调函数名。
服务器：服务器接收到请求后，将数据包装在一个回调函数中返回。
客户端：客户端执行返回的脚本，从而调用回调函数，并处理数据。

JSONP 的实现步骤

1. 定义回调函数

在客户端定义一个全局函数，用于处理服务器返回的数据。

javascript
function handleData(data) {
  console.log('Received data:', data);
}

2. 动态插入 `<script>` 标签

创建一个 <script> 标签，并将其 src 属性设置为目标 URL，同时附加回调函数名。

javascript
function loadScript(url, callback) {
  const script = document.createElement('script');
  script.src = `${url}?callback=${callback}`;
  document.head.appendChild(script);
}

loadScript('https://example.com/data', 'handleData');

服务器端的实现

服务器端需要根据请求中的 callback 参数来包装数据，并返回一个可执行的 JavaScript 脚本。

服务器端示例（Node.js + Express）

假设你有一个简单的 Node.js 服务器，使用 Express 框架。

javascript
const express = require('express');
const app = express();
const port = 3000;

app.get('/data', (req, res) => {
  const data = { message: 'Hello, world!' };
  const callback = req.query.callback;

  if (callback) {
    res.set('Content-Type', 'application/javascript');
    res.send(`${callback}(${JSON.stringify(data)})`);
  } else {
    res.status(400).send('Callback parameter is required.');
  }
});

app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

完整示例

客户端代码

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JSONP Example</title>
</head>
<body>
  <script>
    function handleData(data) {
      console.log('Received data:', data);
    }

    function loadScript(url, callback) {
      const script = document.createElement('script');
      script.src = `${url}?callback=${callback}`;
      document.head.appendChild(script);
    }

    loadScript('http://localhost:3000/data', 'handleData');
  </script>
</body>
</html>

服务器端代码

javascript
const express = require('express');
const app = express();
const port = 3000;

app.get('/data', (req, res) => {
  const data = { message: 'Hello, world!' };
  const callback = req.query.callback;

  if (callback) {
    res.set('Content-Type', 'application/javascript');
    res.send(`${callback}(${JSON.stringify(data)})`);
  } else {
    res.status(400).send('Callback parameter is required.');
  }
});

app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

JSONP 的优点和缺点

优点

跨域支持：JSONP 可以轻松绕过浏览器的同源策略限制。
简单易用：实现相对简单，客户端和服务器端的逻辑都较为直观。

缺点

安全性：JSONP 存在一定的安全风险，因为服务器端返回的脚本会在客户端直接执行。
不支持 POST 请求：JSONP 只支持 GET 请求，无法处理 POST 请求。
异步执行：JSONP 是异步执行的，无法保证执行顺序。

总结

JSONP 是一种常用的跨域数据请求技术，适用于简单的跨域数据交互场景。通过动态插入 <script> 标签和回调函数的方式，可以实现跨域数据的请求和处理。然而，由于其安全性和功能上的局限性，在现代 Web 开发中，通常更推荐使用 CORS（跨域资源共享）机制来实现跨域请求。

JSONP