一文看懂JSONP原理和应用

作者：键盘侠时间：2026-10-24 09:40:40浏览：448

本文详细解析JSONP（JSON with Padding）技术，旨在解决浏览器同源策略限制下的跨域数据请求问题。通过对比传统Ajax的跨域失败案例，深入讲解利用script标签src属性加载远程脚本的原理，并展示从手动构造动态script标签到使用jQuery封装接口的完整实现过程。

JSONP是什么

首先介绍JSON这一概念。JSON是一种轻量级的数据传输格式，目前广泛应用于各类Web应用中。由于几乎所有主流编程语言都实现了JSON数据的编码与解析功能，因此现代前后端分离架构普遍采用JSON作为数据传输的标准格式。

那么，JSONP具体指代什么呢？

这里需要引入浏览器的“同源策略”概念。为了保障用户访问安全，现代浏览器强制实施了同源策略，即禁止网页访问与自身不同源的页面。具体而言，在Ajax请求中，浏览器不允许向非同源URL发起请求。例如，运行在www.a.com域名下的页面，其Ajax请求无法访问www.b.com/c.php接口。

JSONP正是为了解决跨域请求限制而诞生的技术方案。其具体实现机制如下：

JSONP原理

虽然Ajax请求受限于同源策略无法跨域，但HTML中script标签的src属性却可以加载跨域的JavaScript脚本。利用这一特性，服务端不再直接返回JSON格式的数据，而是返回一段执行特定函数的JavaScript代码。前端通过script标签的src属性加载该脚本并执行，从而间接获取数据，实现跨域通信。

JSONP具体实现

1. 分析Ajax跨域请求的结果

假设前端代码部署在www.practice.com域名下，尝试使用Ajax发起一个跨域的GET请求。


<!DOCTYPE html>
<html>
<head>
	<title>GoJSONP</title>
</head>
<body>
<script type="text/javascript">
	function jsonhandle(data){
		alert("age:" + data.age + "name:" + data.name);
	}
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
	$(document).ready(function(){
		$.ajax({
			type : "get",
			async: false,
			url : "http://www.practice-zhao.com/student.php?id=1",
			type: "json",
			success : function(data) {
				jsonhandle(data);
			}

		});
	});
</script>
</body>
</html>

后端PHP代码部署在www.practice-zhao.com域名下，其功能是简单输出一段JSON格式的数据。

jsonhandle({

"age" : 15,

"name": "John",

当访问前端页面http://www.practice.com/gojsonp/index.html时，Chrome浏览器会报错。

JSONP是什么

错误提示表明不同源的URL被禁止访问。

2. 使用JSONP方案，移除前端代码中的Ajax请求

在HTML中添加一个script标签，将其src属性指向另一个域名www.practice-zhao.com下的remote.js脚本文件。


<!DOCTYPE html>
<html>
<head>
	<title>GoJSONP</title>
</head>
<body>
<script type="text/javascript">
	function jsonhandle(data){
		alert("age:" + data.age + "name:" + data.name);
	}
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript" src="http://www.practice-zhao.com/remote.js"></script>
</body>
</html>

此处调用了跨域的remote.js脚本，该脚本的具体代码如下：


jsonhandle({
	"age" : 15,
	"name": "John",
})

上述远程JS代码执行了前端预先定义的函数，并弹出了提示框。

JSONP是什么

3. 进一步修改前端代码

具体代码如下：


<!DOCTYPE html>
<html>
<head>
	<title>GoJSONP</title>
</head>
<body>
<script type="text/javascript">
	function jsonhandle(data){
		alert("age:" + data.age + "name:" + data.name);
	}
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
	$(document).ready(function(){
		var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle";
		var obj = $('<script><\/script>');
		obj.attr("src",url);
		$("body").append(obj);
	});
</script>
</body>
</html>

此处动态创建了一个script标签，其src指向跨域的PHP脚本，并将前文定义的JS函数名作为callback参数传入。接下来查看PHP端代码的实现：


<?php
$data = array(
	'age' => 20,
	'name' => '张三',
);

$callback = $_GET['callback'];

echo $callback."(".json_encode($data).")";
return;

PHP脚本返回了一段JS语句，即：


jsonhandle({
	"age" : 15,
	"name": "张三",
})

当访问页面时，前端动态添加了一个script标签，src指向PHP脚本，执行返回的JS代码后成功弹出提示框。总结而言，JSONP将跨域数据访问转化为执行远程JS代码的过程。服务端不再直接返回JSON数据，而是返回一段将JSON数据作为参数传入回调函数的执行代码。

4. 最后，jQuery提供了便捷的JSONP使用方式

具体代码如下：


<!DOCTYPE html>
<html>
<head>
	<title>GoJSONP</title>
</head>
<body>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
	$(document).ready(function(){
		$.ajax({
			type : "get",
			async: false,
			url : "http://www.practice-zhao.com/student.php?id=1",
			dataType: "jsonp",
			jsonp:"callback", //请求php的参数名
			jsonpCallback: "jsonhandle",//要执行的回调函数
			success : function(data) {
				alert("age:" + data.age + "name:" + data.name);
			}

		});
	});
</script>
</body>
</html>

以上即为JSONP原理与应用的完整解析，更多关于JSONP原理和应用的资料请关注本站其它相关文章！

作者最新文章

免登录快速分享代码：适合面试协作的轻量级JS在线运行工具推荐

2026-11-05 14:45:59

JS空字符串和纯空格转浮点数的结果是什么

2026-11-05 11:04:42

JS在线格式化缩进混乱怎么办？配置项调整技巧

2026-11-04 23:27:25

JS怎么获取秒级时间戳

2026-11-03 21:45:29

JS时间戳怎么从毫秒转换为秒

2026-11-03 20:04:14