一、准备好一个不同源的数据接口
<?php
//JSONP_server.php文件
$connection = mysqli_connect('10.5.221.23','user1','8853202','camp');
$query = mysqli_query($connection,'select * from camp');
while($row = mysqli_fetch_assoc($query)){
$data[] = $row;
}
header('Content-Type: application/javascript');
echo foo(json_encode($data));
注意该JSONP_server.php文件一定要放在不同源地址上
二、script对不同源数据请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX跨域请求</title>
</head>
<body></body>
<script src="../jquery-1.12.1.js"></script>
<script>
var script = document.createElement('script');
script.src = 'http://first.com/JSONP_server.php';
document.body.appendChild(script);
function foo(data){
console.log(data);
}
</script>
</html>
现在我们就可以直接在浏览器中看到服务端响应的内容了：
响应内容
不过这样还是存在一定的问题，因为我们每一次请求想实现的目标可能不同，比如我第一次是想打印响应内容，第二次想打印响应内容的长度，那么就需要为每次一请求定义一个函数并告诉服务端。
三、为每次请求创建唯一的函数
首先在客户端为每次请求初始化一个独一无二的函数名称，同时将函数名称以url地址的形式传递给服务端：
<script>
//为每次请求初始化一个独一无二的函数名称
var funcName = 'F_' + Date.now() + Math.random().toString().substr(2, 5);
//将函数名称以url地址的形式传递给服务端
var script = document.createElement('script');
script.src = 'http://first.com/JSONP_server.php?callback=' + funcName;
document.body.appendChild(script);
window[funcName] = function (res) {
console.log(res);
}
</script>
然后在服务端传回响应内容
<?php
$connection = mysqli_connect('10.5.221.23', 'user1', '8853202', 'camp');
$query = mysqli_query($connection, 'select * from camp');
while ($row = mysqli_fetch_assoc($query)) {
$data[] = $row;
}
header('Content-Type: application/javascript');
$result = json_encode($data);
echo "{$_GET['callback']}({$result})";
调用成功
客户端也能获取到响应内容，同时该函数名称如图所示，基本上不会发生重名的情况
四、逻辑上的完善
需要注意的时并不是每次请求都是跨域请求，所以我们对JSONP进行封装时，应首先在服务端中进行分类：
if(empty($_GET['callback'])){
header('Content-Type: application/json');
echo json_encode($data);
exit();
}
精益求精一下，判断客户端传来的callback是否是真的函数，若为真的函数再执行:
$callback_name = $_GET['callback'];
echo "typeof {$callback_name}==='function'&&{$callback_name}({$result})";
网友评论