JSONP实现原理

JSONP（JSON with padding）的原理是利用了script标签的src属性不受浏览器的同源策略限制，来进行数据请求的。

使用JSONP的请求方式，需要后端支持。

当前端发送GET请求的时候，会在URL上给一个参数，参数的值就是回调函数的名称；后端接收到请求后，会返回一个函数，函数名就是GET请求的参数，返回的函数还有一个实参，一般来说，这个实参就是我们想要的数据，它是一个json。

前端请求示例：

<script src="https://www.test.com/try/ajax/jsonp.php?fnName=callback"></script>

 

后端接收请求，并响应数据，示例：

<?php

//获取回调函数名
$callback = $_REQUEST ['fnName'];

//json数据
$json_data = '["data1","data2"]';

//输出jsonp格式的数据 --- $callback是函数名，$json_data是实参
echo $callback . "(" . $json_data . ")";
?>

当请求成功之后，由于后端返回的是一个回调函数，所以一旦请求成功，函数就会被立即解析执行。

前端需要先定义一个回调函数，否则请求成功之后会发生报错。

function callback(result){
    console.log(result)
}

JSONP的核心原理就是这样的一个情况。