1. 了解同源策略
同源策略是浏览器的一项安全特性，限制了一个网页中加载的资源只能来自同一域。这意味着无法直接通过Ajax请求跨域资源。
2. JSONP的基本原理
JSONP利用了 <script> 标签的跨域特性。它通过在页面中动态创建一个 <script> 标签，该标签的src属性指向包含JSON数据的URL。服务器端的响应会包裹在一个函数调用中，这个函数是在发起JSONP请求时在页面中定义的。
3. 发起JSONP请求
在你的页面中，创建一个包含JSONP请求的函数，并将这个函数的名称作为查询参数传递给服务器。服务器端需要解析这个参数，并在返回的数据中包裹在这个函数的调用中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONP Tutorial</title>
</head>
<body>
<script>
function handleJSONPResponse(data) {
console.log("Received data:", data);
// 在这里处理从服务器返回的数据
}
function makeJSONPRequest() {
// 创建一个 script 元素
var script = document.createElement('script');
// 设置 script 的 src 属性，包含 JSONP 请求的 URL
script.src = 'https://example.com/api/data?callback=handleJSONPResponse';
// 将 script 元素添加到页面中
document.body.appendChild(script);
}
// 发起 JSONP 请求
makeJSONPRequest();
</script>
</body>
</html>
4. 服务器端处理
服务器端收到请求后，将数据包裹在回调函数中返回，回调函数的名称由客户端通过查询参数指定。
示例（Node.js）：
const express = require('express');
const app = express();
app.get('/api/data', (req, res) => {
const callback = req.query.callback;
const data = { message: 'Hello from the server!' };
// 返回包含回调函数的数据
res.send(`${callback}(${JSON.stringify(data)})`);
});
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server is running at http://localhost:${PORT}`);
});
请注意，JSONP存在一些安全性和可维护性方面的问题，因此在现代Web开发中，使用CORS（Cross-Origin Resource Sharing）等更为安全和灵活的技术更为常见。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4514/JSON