JSON和JSONP

封面图 • 2025-11-30 • JavaScript

JSON 和 JSONP 是两种用于数据交换的格式，它们在 Web 开发中经常被使用，尤其是在跨域请求（Cross-Origin Request）的场景下。下面我来详细解释一下它们的区别和用途。

---

## 一、JSON（JavaScript Object Notation）

### 定义：
JSON 是一种轻量级的数据交换格式，基于 JavaScript 的语法，但它是独立于语言的，可以被多种编程语言解析和生成。

### 示例：
```json
{
  "name": "张三",
  "age": 25,
  "isStudent": false
}
```

### 特点：
- 轻量、易读、易解析。
- 支持复杂的数据结构（对象、数组等）。
- 广泛用于前后端通信、API 数据传输。
- **不支持跨域请求**（因为浏览器安全策略限制）。

---

## 二、JSONP（JSON with Padding）

### 定义：
JSONP 是一种**利用 `<script>` 标签的跨域特性**来实现跨域数据获取的技巧，它本质上不是一种真正的“数据格式”，而是一种**跨域请求的解决方案**。

### 工作原理：
1. 前端动态创建一个 `<script>` 标签，其 `src` 指向一个跨域的 URL。
2. 服务器返回的不是一个标准的 JSON 数据，而是一个 JavaScript 函数调用，例如：
   ```javascript
   myCallback({
     "name": "李四",
     "age": 30
   });
   ```
3. 当这个脚本被加载时，浏览器会执行其中的 JavaScript 代码，从而完成数据的处理。

### 示例：
前端代码：
```html
<script>
  function handleResponse(data) {
    console.log(data.name); // 输出：李四
  }
</script>
<script src="https://example.com/data?callback=handleResponse"></script>
```

后端响应（返回的不是 JSON，而是 JS 代码）：
```javascript
handleResponse({"name": "李四", "age": 30});
```

### 特点：
- **支持跨域请求**（利用 `<script>` 标签的同源策略豁免）。
- **只支持 GET 请求**。
- **安全性较低**（容易受到 XSS 攻击）。
- **逐渐被 CORS 取代**（现代浏览器更推荐使用 CORS）。

---

## 三、JSON vs JSONP 的区别

| 特性 | JSON | JSONP |
|------|------|-------|
| 是否支持跨域 | ❌ 不支持 | ✅ 支持 |
| 数据格式 | 真正的数据格式 | 伪装成 JavaScript 的数据 |
| 请求方式 | 通常通过 AJAX 发起 | 通过 `<script>` 标签发起 |
| 安全性 | 较高 | 较低 |
| 支持的方法 | GET/POST | 仅支持 GET |
| 现代推荐 | ✅ 推荐使用（配合 CORS） | ❌ 逐渐淘汰 |

---

## 四、何时使用 JSONP？

JSONP 主要用于以下场景：
- 无法设置 CORS 头的旧系统或第三方 API。
- 需要兼容老旧浏览器（如 IE6~IE8）。
- 在某些受限环境中（如某些嵌入式系统或广告平台）。

---

## 五、现代替代方案：CORS（Cross-Origin Resource Sharing）

CORS 是一种更安全、更灵活的跨域解决方案，现代 Web 应用普遍采用。

### 示例（前端使用 Fetch API）：
```javascript
fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data));
```

---

## 总结

| 名称 | 类型 | 是否支持跨域 | 是否推荐 | 说明 |
|------|------|----------------|----------|------|
| JSON | 数据格式 | ❌ 不支持 | ✅ 推荐 | 通用数据交换格式 |
| JSONP | 技术方案 | ✅ 支持 | ❌ 不推荐 | 旧版跨域方案，已逐渐被淘汰 |
| CORS | 协议机制 | ✅ 支持 | ✅ 推荐 | 现代标准的跨域解决方案 |

---

如果你有具体的应用场景或问题，我可以帮你进一步分析哪种方式更适合。