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>')






评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值