javascript实现jsonp跨域访问

所谓的jsonp跨域访问，其实就是利用了script标签来发送请求，返回的数据为javascript代理，在返回的javascript代码中调用已经写好的javascript方法，传入需要的参数进行处理即可。

下面是项目中用到的跨域访问代码：

1、inc_footer.vm页面代码

<div id="common-footer"></div>
<script type="text/javascript">
    $(function () {
        loadFooterPage()
    });
    function pageCallback(data){
        $("#common-footer").html(data);
    }
    function loadFooterPage() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "${cfg.portalCtx}/common/footerpage";
        document.body.appendChild(script);
    }
</script>

在这段代码中我定义了两个方法loadFooterPage和pageCallback，其中pageCallback方法有个参数data，其实就是跨域请求以后需要调用pageCallback返回并传入一个data参数。loadFooterPage方法只是为了动态创建script标签，并添加到body里面，当当前页面加载完成后才执行loadFooterPage方法，这样做的好处是不影响当前页面的加载。执行loadFooterPage方法后body里面就会多一个script，浏览器会解释执行script标签，去请求script指定的scr路径，执行成功以后返回的内容会被当作javascript执行。

2、controller处理请求后返回

return "common/inc_footer_page";

接着看我的返回页面部分

3、inc_footer_page.vm代码

pageCallback('<div>...</div>')

在我返回页面的只是像写javascript代码一样调用前面写好的pageCallback方法，并传入了参数，返回该页面给调用页时就会执行该调用语句，这样简单的跨域返回就实现了。

注：我用的是springmvc架构，模板引擎用的是velocity，上面的script的src请求路径当然是要过controller处理的，在controller只是作了数据查询等操作，然后return页面。

很多jsonp的文章都会提到一个callback参数，其实是封装的jsonp框架不知道你要调哪个函数来执行请求成功以后的操作，所以要传这个callback参数。上面的代码如果以callback参数来确定调哪个函数，可以改为如下形势

script.src = "${cfg.portalCtx}/common/footerpage?callback=pageCallback";

然后在controller中将这个参数放到model中（方便在页面中获取方法名）

model.addAttribute("callback",callback);

最后在inc_footer_page.vm中调用方法

$!{callback}('<div>...</div>')