php从挖坑到活埋——jsonp的PHP实现

实现JSONP的过程

原理

• 跨域服务器端

//jsonp.js
alert("hello world ~")

• 本地服务器端

//index.html
<script src="https://remote.com/xxx/jsonp.js"></script>

结果：执行alert

回调数据

函数名称必须一致；

• 跨域服务器端

//jsonp.js
jsonp("hello world ~")

• 本地服务器端

//index.html
<script>
	var jsonp = function(data){
		alert(data)
	}
<script/>
<script src="https://remote.com/xxx/jsonp.js"></script>

封装的奥义：动态

ajax和jsonp是两个东西，目的一致而被封装在一起；
jsonp只支持GET的原因：通过URL传参，告诉服务器端回调函数名，以及服务器需要生成的数据；

• 跨域服务器端

//jsonp.php
//  对URL的处理，是否为jsonp形式
$callback = $_REQUEST['jsonp'];
 
//  处理数据相关
$output = "hello world ~";
 
if ($callback) {
	//  执行jsonp函数，解决跨域问题
    header('Content-Type: text/javascript');
    echo $callback . '(' . json_encode($output) . ');';
} else {
    header('Content-Type: application/x-json');
    echo json_encode($output);
}

• 本地服务器端

jQuery封装原理

//index.html
<script>
	//  需要与跨域服务器端保持一致的函数
	var jsonp = function(data){
		callback(data)
	};
	//  自定义的本地回调函数
	function callback(data){
	 //... 
	}
<script/>
//  url传参，?jsonp=函数名
<script src="https://remote.com/xxx/jsonp.js?jsonp=jsonp"></script>