JSONP跨域原理与jQuery及原生JS实现详解

在近期开发中，遇到子域名调用主域名现有功能的需求，通过实践发现利用JSONP技术可以有效解决此类跨域访问问题。本文将相关实现过程整理记录，旨在为有类似需求的开发者提供参考与帮助。

JSONP跨域原理

JSONP全称为JSON with Padding。受限于浏览器的同源策略，XmlHttpRequest对象仅被允许请求当前源（即相同的域名、协议和端口）的资源。为了绕过这一限制实现跨域请求，可以利用HTML中script标签不受同源策略约束的特性，在响应中返回可执行的脚本代码，其中直接包含通过JSON格式传递的JavaScript对象。这种特定的跨域通信机制即被称为JSONP。

从技术本质上看，JSONP实际上是一种脚本注入（Script Injection）行为，因此在实际应用中必须高度重视其潜在的安全风险。

实现JSONP交互通常需要两个页面配合，分别承担协议中的客户端请求与服务器端响应角色。

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jsonp测试例子</title>
<script type="text/javascript" src="http://www.xxxxxxxxxxxx.cn/js/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$.ajax({
type: "get",
async: false,
url: "http://www.xxxxxxxxxxxx.cn/demos/jsonp.php",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"feedBackState",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
success: function(data){
var $ul = $("<ul></ul>");
$.each(data,function(i,v){
$("<li/>").text(v["id"] + " " + v["name"]).appendTo($ul)
}); 
$("#remote").append($ul);
}, 
error: function(){
alert('fail');
} 
}); 
}); 
</script>
</head>
<body>
远程数据如下：<br/>
<div id="remote"></div>
</body>
</html>

 
<?php
$jsonp = $_REQUEST["callback"];
$str = '[{"id":"1","name":"测试1"},{"id":"2","name":"测试2"}]';
$str = $jsonp . "(" .$str.")";
echo $str;
?> 

jQuery库对上述底层逻辑进行了封装，使得开发者无需关注具体实现细节。为了更清晰地理解其工作原理，下面提供一个不使用jQuery封装的原生JavaScript实现示例：

客户端核心代码逻辑如下：

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>jsonp测试例子</title>
<script type="text/javascript" src="http://www.xxxxxxxxxxxx.cn/js/jquery.min.js"></script>
<script type="text/javascript">
function CallJSONPServer(url){ // 调用JSONP服务器，url为请求服务器地址
var oldScript =document.getElementById(url); // 如果页面中注册了调用的服务器，则重新调用
if(oldScript){
oldScript.setAttribute("src",url);
return;
} 
var script =document.createElement("script"); // 如果未注册该服务器，则注册并请求之
script.setAttribute("type", "text/javascript");
script.setAttribute("src",url);
script.setAttribute("id", url);
document.body.appendChild(script);
} 
function OnJSONPServerResponse(data){
var $ul = $("<ul></ul>");
$.each(data,function(i,v){
$("<li/>").text(v["id"] + " " + v["name"]).appendTo($ul)
}); 
$("#remote").append($ul);
} 
</script>
</head>
<body>
<input type="button" value="点击获取远程数据" onclick="CallJSONPServer('http://www.xxxxxxxxxxxx.cn/demos/jsonp_original.php')" />
<div id="remote"></div>
</body>
</html>

 
<?php
$str = '[{"id":"1","name":"测试1"},{"id":"2","name":"测试2"}]';
$str = "OnJSONPServerResponse(" .$str.")";
echo $str;
?> 

注意事项

通过上述代码示例，应该能够清晰理解JSONP的工作机制。在实际应用中，还需注意以下两点关键事项：

1. 由于jQuery在ajax处理中默认使用utf-8编码传递参数，因此建议JSONP服务端也采用utf-8编码，以避免不必要的编码转换问题；若服务端非utf-8编码，务必进行转换，否则可能导致中文数据显示为乱码。

2. 请求的服务端URL应尽量书写完整，例如写成http://www.xxxxxxxxxxxx.cn/index.php?act=add的形式，而非简写为http://www.xxxxxxxxxxxx.cn/?act=add，因为在实际应用中曾出现过简写形式导致的不兼容情况。

至此，JSONP的基本原理与实现方式已介绍完毕。如果读者在应用过程中遇到其他问题，欢迎提出以便共同交流探讨。

本文内容欢迎转载，但请务必注明原文出处并保留相关链接，否则将保留追究权利。

签名：旨在共同交流、共同学习，帮助有需要的人，携手走向成功之路。