浅析JSONP技术原理及实现

什么是JSONP

JSONP，全称为：JSON with Padding，是一个非官方的跨域请求方法。JSONP的原理是，通过动态创建script标签，将服务端返回的数据作为参数传入一个回调函数中，在完成加载后由浏览器自动执行这个回调函数，从而实现跨域的数据传输。JSONP最大的优势是可以跨域获取远程数据，但是后端服务器必须输出一段JavaScript代码，这也是它的缺陷。

原理

JSONP的原理很简单，大致分为如下几个步骤：

1. 页面定义一个回调函数，回调函数的参数为需要获取的数据
2. 创建一个script标签，将请求发送到后端服务器，URL地址中包含回调函数名称
3. 后端服务器根据URL参数输出相应的数据和回调函数名称，并用JavaScript包裹起来，然后通过response返回响应结果
4. 浏览器接收到响应结果后，自动执行回调函数，从而获取到需要的数据

示例说明1：前后端代码

1. 前端代码

function callback(data) {
    console.log(data);
}

let script = document.createElement('script');
script.src = 'http://domain.com/data.php?callback=callback';

document.body.appendChild(script);

1. 后端代码(PHP)

<?php
$data = array('name'=>'John', 'age'=>25, 'address'=>'London');
$callback = $_GET['callback'];
$response = json_encode($data);

echo $callback.'('.$response.')';
?>

通过这个示例，我们可以看到，通过传递一个名为callback的参数，请求发送到后端服务器。后端服务器根据callback参数输出相应的数据和回调函数名称，然后通过echo语句输出响应结果。

示例说明2：jQuery使用JSONP

1. jQuery代码

$.ajax({
    url: 'http://domain.com/data.php',
    dataType: 'jsonp',
    jsonpCallback: 'callback',
    success: function(data) {
        console.log(data);
    }
});

1. PHP代码

<?php
$data = array('name'=>'John', 'age'=>25, 'address'=>'London');
$callback = $_GET['callback'];
$response = json_encode($data);

echo $callback.'('.$response.')';
?>

上面的代码中，我们使用了jQuery的ajax方法，其中jsonpCallback参数用于指定回调函数的名称，success参数用于指定成功获取数据之后的回调函数。在后端，我们同样输出了包含回调函数和返回数据的JavaScript代码。

注意事项

1. JSONP只支持GET请求，并且请求发送到的URL必须是跨域的
2. 回调函数的名称不能包含特殊字符，建议使用数字和字母的组合
3. 后端必须对传入的参数进行过滤，防止XSS攻击
4. 由于JSONP的原理是通过回调函数的方式获取数据，因此返回的数据必须包裹在回调函数中

结语

JSONP的使用场景有很多，可以用于跨域数据传输、数据统计和第三方登录等等。但是，JSONP也存在着一些弊端，例如只能发送GET请求、可能存在安全风险等，在使用的时候需要特别注意。