《JavaScript设计模式》——11.4　JSONP

本节书摘来自异步社区《JavaScript设计模式》一书中的第11章，第11.4节，作者：张容铭著，更多章节内容可以访问云栖社区“异步社区”公众号查看

11.4　JSONP

“第二种代理对象形式是通过script标签。比如我们在CDN（内容分发网络，一种更接近用户的网络架构，是用户可以就近获取内容）上更快速地获取，然而这种获取方式获取的script内容是不变的。而我们需要的代理对象，是对页面与浏览器间通信的，显然上面的方式还不能满足我们的需求，不过我们知道通过src属性可实现get请求，因此我们可以在src指向的url（请求地址）上面添加一些字段信息，然后服务器端获取这些字段，再相应地生成一份内容。”

// 前端浏览器页面
<script type="text/JavaScript">
// 回调函数，打印出请求数据与响应数据
function jsonpCallBack(res,req){
　　console.log(res,req);
}
</script>
<script type="text/JavaScript" src="http://localhost/test/jsonp.php?callback= jsonp CallBack&data=getJsonPData"></script>
// 另外一个域下服务器请求接口
<?php
　　/*后端获取请求字段数据，并生成返回内容*/
　 $data = $_GET["data"];
　 $callback = $_GET["callback"];
　 echo $callback."('success', '".$data."')";
?>

“这种方式，你可以想象成河里面的一只小船，通过小船将你的请求发送给对岸，然后对岸的人们将数据放在小船里为你带回来。”

“哦，那这种方式就需要其他域下的服务器端与前端协同工作开发功能了吧。”