浅析JSONP技术原理及实现

什么是JSONP

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

原理

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

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

示例说明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);

后端代码(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

jQuery代码

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

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代码。