jsonp解决跨域问题

1.同源策略：

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。但是<img>的src（获取图片），<link>的href（获取css），<script>的src（获取javascript）这三个都不符合同源策略，它们可以跨域获取数据。 jsonp就是因为<script>的src不符合同源策略而来的。

2.jsonp原理：

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。

1）首先在客户端注册一个callback, 然后把callback的名字传给服务器。
2）此时，服务器先生成 json 数据。
3）然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.
4）最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
5)客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

3.jsonp具体实现：

1).首先看下ajax中如果进行跨域请求会如何。
前端代码在域www.practice.com下面，使用ajax发送了一个跨域的get请求

[html]view plain copy
<!DOCTYPE html>  
<html>  
<head>  
    <title>GoJSONP</title>  
</head>  
<body>  
<script type="text/javascript">  
    function jsonhandle(data){  
        alert("age:" + data.age + "name:" + data.name);  
    }  
</script>  
<script type="text/javascript" src="jquery-1.8.3.min.js">  
</script>  
<script type="text/javascript">  
    $(document).ready(function(){  
        $.ajax({  
            type : "get",  
            async: false,  
            url : "http://www.practice-zhao.com/student.php?id=1",  
            type: "json",  
            success : function(data) {  
                jsonhandle(data);  
            }  
  
        });  
    });  
</script>  
</body>  
</html>  

后端PHP代码放在域www.practice-zhao.com下，简单的输出一段json格式的数据

[html]view plain copy
jsonhandle({  
    "age" : 15,  
    "name": "John",  
})  

当访问前端代码http://www.practice.com/gojsonp/index.html 时 chrome报以下错误
这里写图片描述
提示了不同源的URL禁止访问

2).下面使用JSONP，将前端代码中的ajax请求去掉，添加了一个script标签，标签的src指向了另一个域www.practice-zhao.com下的remote.js脚本

[html]view plain copy
<!DOCTYPE html>  
<html>  
<head>  
    <title>GoJSONP</title>  
</head>  
<body>  
<script type="text/javascript">  
    function jsonhandle(data){  
        alert("age:" + data.age + "name:" + data.name);  
    }  
</script>  
<script type="text/javascript" src="jquery-1.8.3.min.js">  
</script>  
<script type="text/javascript" src="http://www.practice-zhao.com/remote.js"></script>  
</body>  
</html>  

这里调用了跨域的remote.js脚本，remote.js代码如下：

[html]view plain copy
jsonhandle({  
    "age" : 15,  
    "name": "John",  
})  

也就是这段远程的js代码执行了上面定义的函数，弹出了提示框
这里写图片描述

3).将前端代码再进行修改，代码如下：

[html]view plain copy
<!DOCTYPE html>  
<html>  
<head>  
    <title>GoJSONP</title>  
</head>  
<body>  
<script type="text/javascript">  
    function jsonhandle(data){  
        alert("age:" + data.age + "name:" + data.name);  
    }  
</script>  
<script type="text/javascript" src="jquery-1.8.3.min.js">  
</script>  
<script type="text/javascript">  
    $(document).ready(function(){  
        var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle";  
        var obj = $('<script><\/script>');  
        obj.attr("src",url);  
        $("body").append(obj);  
    });  
</script>  
</body>  
</html>  

这里动态的添加了一个script标签，src指向跨域的一个php脚本，并且将上面的js函数名作为callback参数传入，那么我们看下PHP代码怎么写的：

[html]view plain copy
<?php  
$data = array(  
    'age' => 20,  
    'name' => '张三',  
);  
  
$callback = $_GET['callback'];  
  
echo $callback."(".json_encode($data).")";  
return;  

PHP代码返回了一段JS语句，即

[html]view plain copy
jsonhandle({  
    "age" : 15,  
    "name": "张三",  
})  

此时访问页面时，动态添加了一个script标签，src指向PHP脚本，执行返回的JS代码，成功弹出提示框。
所以JSONP将访问跨域请求变成了执行远程JS代码，服务端不再返回JSON格式的数据，而是返回了一段将JSON数据作为传入参数的函数执行代码。

4).最后jQuery提供了方便使用JSONP的方式，代码如下：

[html]view plain copy
<!DOCTYPE html>  
<html>  
<head>  
    <title>GoJSONP</title>  
</head>  
<body>  
<script type="text/javascript" src="jquery-1.8.3.min.js">  
</script>  
<script type="text/javascript">  
    $(document).ready(function(){  
        $.ajax({  
            type : "get",  
            async: false,  
            url : "http://www.practice-zhao.com/student.php?id=1",  
            dataType: "jsonp",  
            jsonp:"callback", //请求php的参数名  
            jsonpCallback: "jsonhandle",//要执行的回调函数  
            success : function(data) {  
                alert("age:" + data.age + "name:" + data.name);  
            }  
  
        });  
    });  
</script>  
</body>  
</html>