JSONP：JSON with Padding，跨域请求数据的解决方案

五五开发 352 阅读 0 评论 0 点赞

JSONP（JSON with Padding）是一种允许网页从其他域名（或端口、协议）获取资料的跨域请求技术，它利用了<script>标签不受同源策略限制的特点来实现跨域通信。以下是对JSONP的详细解释，包括其工作原理、使用场景、优缺点以及一个实例形象的讲解。

一、JSONP的工作原理

同源策略限制：浏览器的同源策略限制了从一个源（域名、端口、协议）加载的文档或脚本与来自另一个源的资源进行交互。这意味着，如果两个网页位于不同的域名下，它们之间不能直接通过AJAX等方式进行通信。
利用<script>标签：然而，浏览器允许网页通过<script>标签引入其他域名下的JavaScript脚本。这是因为<script>标签的src属性可以跨域请求资源，这是浏览器为了允许CDN等外部脚本服务而留下的一个“后门”。
JSONP的实现：JSONP正是利用了这一特性。它通过在请求地址中传递一个回调函数名称，服务器在返回数据时，将这个数据作为回调函数的参数，并包裹在函数调用中返回。这样，当<script>标签加载这个返回的数据时，就会自动调用指定的回调函数，并将数据作为参数传递给该函数。

二、JSONP的使用场景

前后端分离：在前后端分离的架构中，前端页面通过AJAX请求后台数据时，如果前端和后台服务部署在不同的域名下，可以使用JSONP来解决跨域请求的问题。
第三方API调用：在调用第三方API时，如谷歌地图API或社交媒体API，由于这些API通常通过HTTPS跨域访问，因此可以使用JSONP来实现跨域请求。
历史兼容性：在一些对老旧浏览器兼容性要求较高的网站中，由于这些浏览器可能不支持CORS（跨域资源共享）等更现代的跨域解决方案，因此仍然需要使用JSONP来实现跨域请求。

三、JSONP的优缺点

优点：

跨域通信：JSONP能够绕过浏览器的同源策略限制，实现跨域通信。
兼容性好：JSONP在老旧浏览器中也能很好地工作，因为它不依赖于XMLHttpRequest对象或ActiveX等现代浏览器特性。
简单易用：JSONP的实现相对简单，只需要在请求地址中传递回调函数名称，并在服务器端进行相应的处理即可。

缺点：

只支持GET请求：由于JSONP是通过<script>标签发起请求的，因此它只能发送GET请求，而不能发送POST等其他类型的HTTP请求。
存在安全风险：由于JSONP需要将回调函数名称暴露在URL中，因此可能会受到XSS（跨站脚本攻击）等安全威胁。此外，如果服务器返回的数据格式不正确或包含恶意代码，也可能对前端页面造成损害。
不支持现代浏览器的某些特性：随着现代浏览器的发展，CORS等更安全的跨域解决方案已经成为主流。因此，在一些现代浏览器和场景中，JSONP可能不再是最佳选择。

四、JSONP实例形象的讲解

假设我们有一个名为studentService的服务器，它位于http://example.com域名下。我们想要从这个服务器获取一个学生信息列表，并将其显示在我们的网页上。由于我们的网页位于http://localhost域名下，因此直接通过AJAX请求会受到同源策略的限制。这时，我们可以使用JSONP来实现跨域请求。

前端代码：

html复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONP Example</title>
    <script>
        // 定义回调函数
        function handleResponse(data) {
            // 将数据转换为字符串并显示在页面上
            document.getElementById('result').innerText = JSON.stringify(data);
        }
 
        // 当页面加载完成时，动态创建一个<script>标签并设置其src属性为JSONP请求地址
        window.onload = function() {
            var script = document.createElement('script');
            script.src = 'http://example.com/studentService?callback=handleResponse';
            document.body.appendChild(script);
        };
    </script>
</head>
<body>
    <h1>Student Information</h1>
    <div id="result"></div>
</body>
</html>

后端代码（假设使用Node.js）：

javascript复制代码
const http = require('http');
const querystring = require('querystring');
 
http.createServer((req, res) => {
    // 解析URL查询参数
    const params = querystring.parse(req.url.split('?')[1]);
 
    // 获取回调函数名称
    const callback = params.callback;
 
    // 模拟学生信息列表
    const studentList = [
        { name: '张三', age: 20 },
        { name: '李四', age: 22 },
        { name: '王五', age: 23 }
    ];
 
    // 将学生信息列表转换为JSON字符串，并包裹在回调函数调用中返回
    res.writeHead(200, { 'Content-Type': 'application/javascript' });
    res.end(`${callback}(${JSON.stringify(studentList)})`);
}).listen(3000, () => {
    console.log('Server is running on port 3000');
});

在这个例子中，当前端页面加载时，它会动态创建一个<script>标签，并将其src属性设置为JSONP请求地址。这个地址包含了回调函数名称handleResponse作为查询参数。当服务器接收到这个请求时，它会解析查询参数，获取回调函数名称，并将学生信息列表转换为JSON字符串后包裹在回调函数调用中返回。当前端页面接收到这个返回的数据时，它就会自动调用handleResponse函数，并将学生信息列表作为参数传递给该函数。最后，这个函数会将学生信息列表转换为字符串并显示在页面上。

扫描下方二维码，一个老毕登免费为你解答更多软件开发疑问！

本文分类：软件开发词汇/术语
本文标签：无
浏览次数：352 次浏览
发布日期：2024-11-13 08:29:49
本文链接：https://www.55kaifa.com/ruanjiankaifacihuishuyu/1949.html

JSONP：JSON with Padding，跨域请求数据的解决方案

一、JSONP的工作原理

二、JSONP的使用场景

三、JSONP的优缺点

四、JSONP实例形象的讲解

物业管理工单AI调度方案：维修响应缩短至30分钟的核心算法

电商网站加速方案：WooCommerce加载从5s到0.9s的实操

APP开发后如何做A/B测试？ (转化率提升指南！界面/文案/按钮优化案例)

APP开发后如何做热更新？ (动态修复BUG！不重新上架的更新方案)

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>JSONP Example</title>
	<script>
	// 定义回调函数
	function handleResponse(data) {
	// 将数据转换为字符串并显示在页面上
	document.getElementById('result').innerText = JSON.stringify(data);
	}

	// 当页面加载完成时，动态创建一个<script>标签并设置其src属性为JSONP请求地址
	window.onload = function() {
	var script = document.createElement('script');
	script.src = 'http://example.com/studentService?callback=handleResponse';
	document.body.appendChild(script);
	};
	</script>
	</head>
	<body>
	<h1>Student Information</h1>
	<div id="result"></div>
	</body>
	</html>

	const http = require('http');
	const querystring = require('querystring');

	http.createServer((req, res) => {
	// 解析URL查询参数
	const params = querystring.parse(req.url.split('?')[1]);

	// 获取回调函数名称
	const callback = params.callback;

	// 模拟学生信息列表
	const studentList = [
	{ name: '张三', age: 20 },
	{ name: '李四', age: 22 },
	{ name: '王五', age: 23 }
	];

	// 将学生信息列表转换为JSON字符串，并包裹在回调函数调用中返回
	res.writeHead(200, { 'Content-Type': 'application/javascript' });
	res.end(`${callback}(${JSON.stringify(studentList)})`);
	}).listen(3000, () => {
	console.log('Server is running on port 3000');
	});