JSONP 教程
JSONP 教程（中文讲解）
JSONP（JSON with Padding）是一种跨域数据请求技术，用于绕过浏览器的同源策略，允许网页从不同域名获取数据。以下是对 JSONP 的详细中文教程，涵盖其定义、工作原理、实现方法、在 Node.js 中的使用、与 JSON 的关系，以及注意事项和现代替代方案，力求简洁清晰。
1. 什么是 JSONP？
- 定义：JSONP 是一种通过
<script>标签加载跨域数据的解决方案。它利用了<script>标签不受同源策略限制的特性，将 JSON 数据包装在客户端指定的回调函数中返回。 - 用途：在浏览器中从不同域名获取数据，常用于早期 Web 开发的跨域请求（例如调用第三方 API）。
- 与 JSON 的关系：JSONP 是 JSON 的扩展，JSON 是一种数据格式，而 JSONP 是将 JSON 数据包装在回调函数中（如
callback({"key": "value"})）。
示例 JSONP 响应：
callback({"name": "张三", "age": 25});2. JSONP 的工作原理
- 客户端：
- 创建一个
<script>标签，src指向跨域服务器的 URL，并附加一个回调函数名（通常通过查询参数callback指定）。 - 定义回调函数，处理返回的数据。
- 服务器：
- 接收请求，生成 JSON 数据。
- 将 JSON 数据包装在客户端指定的回调函数中，返回 JavaScript 代码。
- 浏览器：
- 执行返回的 JavaScript 代码，调用客户端定义的回调函数，传入 JSON 数据。
流程图：
客户端: <script src="http://api.example.com/data?callback=myCallback">
服务器: 返回 myCallback({"name": "张三"})
浏览器: 执行 myCallback({"name": "张三"})3. JSONP 的实现
以下是在 Node.js 和浏览器环境中实现 JSONP 的详细步骤。
3.1 客户端（浏览器端）
在 HTML 中使用 JSONP 获取数据：
<!DOCTYPE html>
<html>
<head>
<title>JSONP 示例</title>
</head>
<body>
<script>
// 定义回调函数
function myCallback(data) {
console.log('收到数据：', data);
document.getElementById('result').innerText = JSON.stringify(data, null, 2);
}
// 动态创建 <script> 标签
const script = document.createElement('script');
script.src = 'http://api.example.com/data?callback=myCallback';
document.body.appendChild(script);
</script>
<pre id="result"></pre>
</body>
</html>- 说明：
myCallback是客户端定义的函数。<script>的src指向跨域 API，带上callback=myCallback参数。- 服务器返回
myCallback({"name": "张三"})，浏览器执行后调用myCallback。
3.2 服务端（Node.js）
使用 Node.js 创建一个支持 JSONP 的服务器：
const http = require('http');
const server = http.createServer((req, res) => {
// 解析 URL 和查询参数
const url = new URL(req.url, `http://${req.headers.host}`);
const callback = url.searchParams.get('callback');
// 模拟数据
const data = {
name: "李四",
age: 30,
hobbies: ["读书", "旅行"]
};
// 如果有 callback 参数，返回 JSONP 响应
if (callback) {
res.writeHead(200, { 'Content-Type': 'application/javascript' });
const jsonString = JSON.stringify(data);
res.end(`${callback}(${jsonString})`);
} else {
// 否则返回普通 JSON
res.writeHead(200, { 'Content-Type': 'application/json' });
res.end(JSON.stringify(data));
}
});
server.listen(3000, () => {
console.log('服务器运行在 http://localhost:3000');
});- 运行：
- 保存为
server.js，运行node server.js。 - 浏览器访问
http://localhost:3000/data?callback=myCallback，返回：javascript myCallback({"name":"李四","age":30,"hobbies":["读书","旅行"]})
- 说明：
- 服务器检查
callback查询参数。 - 使用
JSON.stringify()生成 JSON 字符串，包装在回调函数中。
4. JSONP 与 MongoDB 的结合
JSONP 常用于从服务器获取数据，而 MongoDB 存储的数据可以轻松转为 JSONP 响应。以下是结合 MongoDB 和 Node.js 的 JSONP 示例：
示例：从 MongoDB 返回 JSONP 数据
const { MongoClient } = require('mongodb');
const http = require('http');
const url = require('url');
const uri = 'mongodb://localhost:27017/myDatabase';
const client = new MongoClient(uri);
async function startServer() {
await client.connect();
const db = client.db('myDatabase');
const collection = db.collection('users');
const server = http.createServer(async (req, res) => {
const parsedUrl = new URL(req.url, `http://${req.headers.host}`);
const callback = parsedUrl.searchParams.get('callback');
try {
// 从 MongoDB 查询数据
const data = await collection.findOne({ name: "张三" });
if (callback) {
// JSONP 响应
res.writeHead(200, { 'Content-Type': 'application/javascript' });
const jsonString = JSON.stringify(data);
res.end(`${callback}(${jsonString})`);
} else {
// 普通 JSON 响应
res.writeHead(200, { 'Content-Type': 'application/json' });
res.end(JSON.stringify(data));
}
} catch (error) {
res.writeHead(500, { 'Content-Type': 'text/plain' });
res.end('服务器错误');
}
});
server.listen(3000, () => console.log('服务器运行在 http://localhost:3000'));
}
startServer().catch(console.error);- 准备 MongoDB：
- 确保 MongoDB 运行，数据库
myDatabase中有users集合。 - 插入测试数据：
javascript db.users.insertOne({ name: "张三", age: 25, hobbies: ["读书"] });
- 访问：
- 浏览器请求
http://localhost:3000?callback=myCallback，返回：myCallback({"_id":"someId","name":"张三","age":25,"hobbies":["读书"]}) - 说明：
- MongoDB 返回的文档是 JavaScript 对象，直接用
JSON.stringify()转为 JSON 字符串。 - 包装在回调函数中形成 JSONP 响应。
5. JSONP 的优缺点
优点
- 跨域支持：绕过同源策略，适合从不同域名获取数据。
- 简单易用：只需
<script>标签和回调函数，客户端代码简单。 - 广泛兼容：几乎所有浏览器都支持
<script>标签。
缺点
- 仅支持 GET 请求：无法使用 POST、PUT 等方法。
- 安全性风险：执行外部 JavaScript 代码，可能导致 XSS（跨站脚本攻击）。
- 无错误处理：
<script>加载失败无法捕获详细错误。 - 过时技术：现代 Web 开发更倾向于使用 CORS 或 Fetch API。
6. JSONP vs JSON
| 特性 | JSON | JSONP |
|---|---|---|
| 格式 | 纯数据（对象、数组等） | JSON 数据包装在回调函数中 |
| 用途 | 数据存储、传输 | 跨域数据请求 |
| 输出示例 | {"name": "张三"} | callback({"name": "张三"}) |
| 跨域 | 受同源策略限制 | 通过 <script> 绕过同源策略 |
| 安全性 | 安全，纯数据 | 需小心 XSS 风险 |
- JSON：用于数据存储（如 MongoDB 文档）或同域 API 传输。
- JSONP：专为跨域请求设计，实际返回的是可执行的 JavaScript 代码。
7. 现代替代方案
JSONP 是早期跨域解决方案，现代 Web 开发推荐以下替代方案：
- CORS（跨源资源共享）：
- 服务器设置
Access-Control-Allow-Origin头，允许跨域请求。 - 示例（Node.js Express）：
javascript const express = require('express'); const app = express(); app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); next(); }); app.get('/data', (req, res) => { res.json({ name: "李四", age: 30 }); }); app.listen(3000);
- Fetch API 或 XMLHttpRequest：
- 使用现代 AJAX 请求，配合 CORS。
- 示例：
javascript fetch('http://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('错误：', error));
- Proxy 服务器：
- 在同域服务器代理跨域请求，绕过浏览器限制。
- 为何替代 JSONP：
- CORS 更安全，支持所有 HTTP 方法。
- Fetch API 提供更好的错误处理和灵活性。
- JSONP 的 XSS 风险和限制使其逐渐被淘汰。
8. 注意事项与最佳实践
- 安全性：
- 只从可信域名加载 JSONP 数据，避免 XSS 攻击。
- 验证回调函数名，防止恶意注入。
- 错误处理：
- JSONP 无法直接捕获网络错误，可设置超时：
javascript const script = document.createElement('script'); script.src = 'http://api.example.com/data?callback=myCallback'; setTimeout(() => { if (!window.myCallbackCalled) { console.error('JSONP 请求超时'); } }, 5000); document.body.appendChild(script);
- 调试：
- 使用浏览器开发者工具（Network 面板）检查 JSONP 响应。
- 验证 JSON 数据格式是否正确（可用 JSONLint）。
- 迁移到 CORS：
- 如果控制服务器，优先配置 CORS，逐步替换 JSONP。
9. 总结
- JSONP：一种通过
<script>标签实现跨域请求的技术，将 JSON 数据包装在回调函数中。 - 实现：客户端定义回调函数，动态加载
<script>；服务器返回callback(data)。 - Node.js 使用：结合 MongoDB 和 HTTP 服务器，轻松生成 JSONP 响应。
- 局限性：仅支持 GET，安全性较低，现代开发推荐 CORS 或 Fetch。
- 与 JSON：JSON 是数据格式，JSONP 是跨域传输方案。
如果你需要更详细的 JSONP 示例（如复杂数据处理、错误处理），或想了解 CORS 配置、MongoDB 集成，请告诉我，我会提供更具体代码或指导！
const { MongoClient } = require('mongodb');
const http = require('http');
const uri = 'mongodb://localhost:27017/myDatabase';
const client = new MongoClient(uri);
async function startServer() {
await client.connect();
const db = client.db('myDatabase');
const collection = db.collection('users');
const server = http.createServer(async (req, res) => {
const url = new URL(req.url, `http://${req.headers.host}`);
const callback = url.searchParams.get('callback');
try {
const data = await collection.findOne({ name: "张三" });
if (callback) {
res.writeHead(200, { 'Content-Type': 'application/javascript' });
res.end(`${callback}(${JSON.stringify(data)})`);
} else {
res.writeHead(200, { 'Content-Type': 'application/json' });
res.end(JSON.stringify(data));
}
} catch (error) {
res.writeHead(500, { 'Content-Type': 'text/plain' });
res.end('服务器错误');
}
});
server.listen(3000, () => console.log('服务器运行在 http://localhost:3000'));
}
startServer().catch(console.error);<!DOCTYPE html>
<html>
<head>
<title>JSONP 客户端</title>
</head>
<body>
<pre id="result"></pre>
<script>
window.myCallbackCalled = false;
function myCallback(data) {
window.myCallbackCalled = true;
document.getElementById('result').innerText = JSON.stringify(data, null, 2);
}
const script = document.createElement('script');
script.src = 'http://localhost:3000?callback=myCallback';
document.body.appendChild(script);
setTimeout(() => {
if (!window.myCallbackCalled) {
console.error('JSONP 请求超时');
}
}, 5000);
</script>
</body>
</html>