JSONP解决跨域获取数据

1、什么是JSONP？

要了解JSONP，不得不提一下JSON，那么什么是JSON ？

JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

2、JSONP有什么用？

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

3、如何使用JSONP？

下边这一DEMO实际上是JSONP的简单表现形式，在客户端声明回调函数之后，客户端通过script标签向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回调函数。

HTML

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript">
    function jsonpCallback(result) {
        alert(result.a);
        alert(result.b);
        alert(result.c);
        for(var i in result) {
            alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
        }
    }
</script>
<script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>

PHP

<?php
//服务端返回JSON数据
$arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
$result=json_encode($arr);
//echo $_GET['callback'].'("Hello,World!")';
//echo $_GET['callback']."($result)";
//动态执行回调函数
$callback=$_GET['callback'];
echo $callback."($result)";

以下方法用jquery实现

HTML

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
function test() {
    $.ajax({
        url: ' http://test.com/jsonp/test.php',
        type: 'GET',  //这里用GET
        async: false,
        data:{uid: 1, opt: 2},
        dataType: 'jsonp',  //类型
        jsonp: 'callback', //jsonp回调参数，必需
        success: function(result) {
            alert(result.message); //回调输出
        }
    });
}
test();
</script>

PHP

<?php
header("Access-Control-Allow-Methods: GET,POST");
header("Access-Control-Allow-Headers: x-requested-with,content-type");
header("Access-Control-Allow-Origin: http://blog.beidafuxiao.cn");
$callback = isset($_GET['callback']) ? trim($_GET['callback']) : ''; //jsonp回调参数，必需
$data= '{"message":"test"}'; //json 数据
echo $callback . '(' . $data .')';  //返回格式，必需
?>

总结：jsonp就是利用了script标签的跨域能力，实现站点跨域访问的

只有当目标页面的response中，包含了 Access-Control-Allow-Origin 这个header，并且它的值里有我们自己的域名时，浏览器才允许我们拿到它页面的数据进行下一步处理。如：Access-Control-Allow-Origin: http://run.jsbin.io
如果它的值设为 * ，则表示谁都可以用：
Access-Control-Allow-Origin: *
没错，在产品环境中，没人会用 *

Access-Control-Allow-Methods 允许访问的方法