jsonp 解决跨域传输

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

 

背景: 自己的网站简称A要使用B网站提供的json数据。首先想到的是在A网站的javascript代码里通过Ajax异步请求B网站获取json数据，但是浏览器会禁止这种做法，因为A和B是不同域的。

 

解决办法：浏览器允许调用不同域的javascript代码文件.<script>标签的src属性并不被同源策略所约束，所以可以获取任何服务器上脚本并执行

 

A网站

 

<script type="text/javascript">
    function addScriptTag(src){
        var script = document.createElement('script');
        script.setAttribute("type","text/javascript");
        script.src = src;
        document.body.appendChild(script);
    }
    window.onload = function(){
        //调用远程服务
        addScriptTag("http://localhost:20002/MyService.ashx?callback=person");
    }
    //回调函数person
    function person(data) {
        alert(data.name + " is a " + data.sex);
    }
</script>

 

 

B网站  http://localhost:20002/MyService.ashx?callback=person  可以返回json数据

 

 

 

 

 

jQuery框架也当然支持JSONP，可以使用$.getJSON(url,[data],[callback])方法(详细可以参考http://api.jquery.com/jQuery.getJSON/)。那我们就来修改下程序A的代码，改用jQuery的getJSON方法来实现(下面的例子没用用到向服务传参，所以只写了getJSON(url,[callback]))：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $.getJSON("http://localhost:20002/MyService.ashx?callback=?",function(data){
        alert(data.name + " is a a" + data.sex);
    });
</script>