jsonp跨域原理及使用

来源:互联网 发布:c语言乘法编程 编辑:程序博客网 时间:2024/05/17 01:29

在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的。但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的。
jsonp通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。
知道jsonp跨域的原理后我们就可以用js动态生成script标签来进行跨域操作了,而不用特意的手动的书写那些script标签。如果你的页面使用jquery,那么通过它封装的方法就能很方便的来进行jsonp操作了。

ajax版本

<script>     $.ajax({         type: "get",         url: "http://localhost:8070/pc/auth/logout",         dataType: "jsonp",         jsonp: "callback",         jsonpCallback:"jsonpCallback",         data: {"user_id":"4AE1D1B6816049B1"},         success: function(json){             alert('json:' + JSON.stringify(json));         },         error: function(){             alert('fail');         }     });</script>

jQuery版本:

<script>    $.getJSON("http://localhost:8080/login?callback=?",        function(data){                  alert(data);                });</script>

jquery会自动生成一个全局函数来替换jsonpCallback=?中的问号,之后获取到数据后又会自动销毁,实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域,不跨域的话,就调用普通的ajax方法;跨域的话,则会以异步加载js文件的形式来调用jsonp的回调函数。

java后端:

if (supportJsonp(request)) {            jsonpWrapper(request, response, res);            return null;        } else {            return res;        }protected boolean supportJsonp(HttpServletRequest request) {        String cb = request.getParameter("callback");        if (cb != null) {            return true;        } else {            return false;        }    }protected void jsonpWrapper(HttpServletRequest request, HttpServletResponse response,Object entity) {        String cb = request.getParameter("callback");        response.setHeader("Access-Control-Allow-Origin", "*");         response.setContentType("text/javascript");         try {                Writer out = response.getWriter();                out.write(cb + "(");                ((PrintWriter) out).print(Tools.toJSONString(entity));                out.write(");");            } catch (IOException e) {                e.printStackTrace();            }    }
0 0
原创粉丝点击