jsonp跨域

jsonp实现jQuery跨域

什么是跨域
　JS为了安全有一个限制，不允许跨域访问。
　　 1. 两个url的域名不同
　　 2. url相同，端口不同也是跨域
　　 3. IP不同也是跨域
解决跨域的问题
　可以使用jsonp解决跨域的问题。
　　1. 在js中不能跨域请求数据，js可以跨域请求js片段。
　　2. 可以把数据包装成js片段。可以把数据使用js方法来包装，形成一条方法的调用语句。
　　3. 可以使用ajax请求js片段，当js判断到达浏览器会被立即执行。
　　4. 在浏览器端，先创建好回调方法，在回调方法中通过参数可以获得请求的数据。

服务器端

方式一：

@Controller
public class TestJSONP {　
    //指明prodeces返回数据类型　 
    @RequestMapping(value="/test/jsonp",produces=MediaType.APPLICATION_JSON_VALUE)
    @ResponseBody
    //返回是String类型
    public String testJSONP(String callback/*,PrintWriter out*/){
        String data = "{\"name\":\"jack\",\"age\":\"18\"}";
    //  out.print(callback+"("+data+")");
        return callback+"("+data+")";
    }
}

代码中的注释也是可用的。

方式二：

    @Controller
    public class TestJSONP {　
    @RequestMapping("/test/jsonp")
    @ResponseBody
    //使用MappingJacksonValue，返回类型是Object
    public Object testJSONP(String callback) {
        Person person = new Person("jack",18);
        //请求为jsonp调用，需要支持
        MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(person);
        mappingJacksonValue.setJsonpFunction(callback);
        return mappingJacksonValue;
    }
}

浏览器端

使用jQuery的$.getJSON(url,[data],[fn])

<script type="text/javascript">
    $(function(){
        $("#jsonp").click(function(){
        $.getJSON("http://localhost:8081/rest/test/jsonp?callback=?",function(data){
                alert(data);
            })
        });  
    })
</script>

对于回调函数，jQuery会自动生成一个全局函数来替换callback=?中的问号。这种方法如果不用？，改为自定义方法名，好像行不通。

从浏览器查看到的消息：