JSONP原理

JSONP原理

JSONP（JSON with Padding）是一种跨域数据交互的技术，主要用于解决浏览器同源策略限制下的数据获取问题。其核心思想是利用<script>标签不受同源策略限制的特性，通过动态创建脚本标签从不同域的服务器获取数据。

同源策略与跨域问题

浏览器出于安全考虑实施了同源策略（Same-Origin Policy），限制来自不同源的脚本交互。同源指协议、域名和端口完全相同。例如：

• https://example.com和https://api.example.com不同源
• http://localhost:3000和http://localhost:8080不同源

传统AJAX请求受此限制，而<script>、<img>等标签的src属性不受影响。JSONP正是利用这一特性实现跨域通信。

JSONP实现机制

JSONP的基本流程如下：

1. 客户端定义一个全局回调函数
2. 动态创建<script>标签，将回调函数名作为参数附加到URL
3. 服务器返回调用该函数的JavaScript代码，数据作为参数
4. 浏览器执行返回的代码，触发回调函数

// 客户端代码
function handleResponse(data) {
  console.log('Received:', data);
}

const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

服务器响应格式：

handleResponse({
  "userId": 1,
  "name": "John Doe",
  "email": "john@example.com"
});

动态回调处理

实际应用中通常需要动态生成回调函数名，避免命名冲突：

function jsonp(url, callback) {
  const callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random());
  
  window[callbackName] = function(data) {
    delete window[callbackName];
    document.body.removeChild(script);
    callback(data);
  };

  const script = document.createElement('script');
  script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'callback=' + callbackName;
  document.body.appendChild(script);
}

// 使用示例
jsonp('https://api.example.com/users', function(data) {
  console.log('User data:', data);
});

服务端实现

服务器需要支持JSONP响应格式。以下是Node.js Express的实现示例：

const express = require('express');
const app = express();

app.get('/api/data', (req, res) => {
  const callback = req.query.callback;
  const data = {
    items: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' }
    ]
  };
  
  if (callback) {
    res.type('text/javascript');
    res.send(`${callback}(${JSON.stringify(data)})`);
  } else {
    res.json(data);
  }
});

app.listen(3000);

安全考虑

JSONP存在一些安全隐患需要注意：

1. XSS风险：完全信任第三方返回的JavaScript代码
2. CSRF漏洞：无法像AJAX那样设置自定义头部进行验证
3. 错误处理困难：无法通过HTTP状态码判断请求状态

建议措施：

• 仅与可信的API提供者使用JSONP
• 实现超时机制防止长时间等待
• 考虑使用CORS替代JSONP

// 带超时处理的JSONP实现
function jsonpWithTimeout(url, callback, timeout = 5000) {
  const callbackName = 'jsonp_cb_' + Date.now();
  let timeoutId;

  window[callbackName] = function(data) {
    cleanup();
    callback(null, data);
  };

  function cleanup() {
    clearTimeout(timeoutId);
    delete window[callbackName];
    if (script.parentNode) {
      document.body.removeChild(script);
    }
  }

  const script = document.createElement('script');
  script.src = `${url}?callback=${callbackName}`;
  script.onerror = function() {
    cleanup();
    callback(new Error('JSONP request failed'));
  };

  timeoutId = setTimeout(() => {
    cleanup();
    callback(new Error('Request timeout'));
  }, timeout);

  document.body.appendChild(script);
}

实际应用场景

JSONP常用于以下场景：

1. 获取第三方公开API数据
2. 旧浏览器不支持CORS时的降级方案
3. 简单的跨域数据交换需求

示例：获取天气数据

function showWeather(data) {
  const temp = data.main.temp;
  const desc = data.weather[0].description;
  console.log(`Current temperature: ${temp}°C, ${desc}`);
}

const apiKey = 'YOUR_API_KEY';
const city = 'Beijing';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric&callback=showWeather`;

const script = document.createElement('script');
script.src = url;
document.body.appendChild(script);

与现代技术的对比

相比现代跨域解决方案，JSONP有其局限性：

浏览器兼容性

JSONP几乎支持所有浏览器，包括：

• IE6+
• Chrome 1+
• Firefox 1+
• Safari 3+
• Opera 9+

这使得它在需要支持老旧浏览器的场景中仍有使用价值。

性能优化

对于频繁的JSONP请求，可以考虑以下优化：

1. 复用回调函数
2. 请求合并
3. 缓存机制

// 复用回调的JSONP池
const jsonpPool = {
  callbacks: {},
  count: 0,
  
  request(url, callback) {
    const id = 'cb_' + (this.count++);
    this.callbacks[id] = callback;
    
    const script = document.createElement('script');
    script.src = `${url}${url.includes('?') ? '&' : '?'}callback=jsonpPool.response.${id}`;
    document.body.appendChild(script);
    
    return {
      abort() {
        delete jsonpPool.callbacks[id];
        document.body.removeChild(script);
      }
    };
  },
  
  response: new Proxy({}, {
    get(target, id) {
      return function(data) {
        if (jsonpPool.callbacks[id]) {
          jsonpPool.callbacks[id](data);
          delete jsonpPool.callbacks[id];
        }
      };
    }
  })
};

// 使用示例
const req = jsonpPool.request('https://api.example.com/data', function(data) {
  console.log('Data received:', data);
});

// 可取消请求
// req.abort();