`
xunmengsj
  • 浏览: 9901 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

详解Jquery和AngularJs中jsonp解决跨域问题

阅读更多

众所周知,jsonp可以解决跨域问题,下面是我在查阅资料和实际项目使用后的一些总结。

  • Jquery中jsonp的使用
myUrl = "http://localhost:8090/api/test";
$.ajax({
  type:"GET",
  url:myUrl,
  dataType:"jsonp",
  jsonp:"callback",
  jsonpCallback:"jsonpCallback",
  success:function(data){
    alert(data.msg);
  }
});
function jsonpCallback(data){
     alert(data);
}
1.jsonp只能使用get请求,解决同源问题,返回javascript代码,因为请求javascript文件是没有同源问题的。
2.当请求数据类型为jsonp时,会将callback=jsonpCallback加在url上,http://localhost:8090/api/test?callback=jsonpCallback
3.前台javascript中定义jsonpCallback函数,此函数必须定义在window下,也就是全局的函数,否则找不到。
4.后台获取请求的callback参数值jsonpCallback,返回字符串"jsonpCallback(result)",result为返回结果。
5.请求返回的是script tag,首先会调用jsonpCallback函数,不管是否找到该函数,都会调用success函数。
6.如果没有定义jsonp和jsonpCallback,jsonp默认为"callback",jsonpCallback会是Jquery自动生成的函数名。
  • angularJS中jsonp的使用
myUrl = "http://localhost:8090/api/test?callback=JSON_CALLBACK";
$http.jsonp(myUrl).success(
     function(data){
          alert(data);
     }     
);
1.angularJS中使用$http.jsonp函数
2.指定callback和回调函数名,函数名为JSON_CALLBACK时,会调用success回调函数,JSON_CALLBACK必须全为大写。
3.也可以指定其它回调函数,但必须是定义在window下的全局函数。
4.url中必须加上callback
5.当callback为JSON_CALLBACK时,只会调用success,即使window中有JSON_CALLBACK函数,也不会调用该函数。
  • jersey对jsonp的支持
    @GET
    @Path("test")
    @Produces("application/javascript")
    public JSONWithPadding sendTransToPlugin(@QueryParam("callback") String callback) {
        PluginEvent pluginEvent = new PluginEvent("aaa","","");
        pluginEvent.setAppendDescription("");
        pluginEvent.setErrorDescription("");
        Gson gson = new Gson();
        String json = gson.toJson(pluginEvent);
        JSONWithPadding js = new JSONWithPadding(json,callback);
//        JSONWithPadding js = new JSONWithPadding(new GenericEntity<PluginEvent>(pluginEvent){},callback);
        return js;
    }
 
@GET    
@Path("test")
@Produces(MediaType.APPLICATION_JSON)    
public String callTest(@QueryParam("callback") String callbackFunName) {    
    StringBuilder stringBuilder = new StringBuilder(callbackFunName);    
    stringBuilder.append("(");    
    stringBuilder.append(123);    
    stringBuilder.append(")");    
    return stringBuilder.toString();    
}
  • Servlet中的使用
@Override    
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {                                  
    resp.setContentType("application/json;charset=UTF-8");    
    PrintWriter out = resp.getWriter();   
    String callbackFunName = req.getParameter("callback");    
    StringBuilder stringBuilder = new StringBuilder(callbackFunName);    
    stringBuilder.append("(");    
    stringBuilder.append(123);    
    stringBuilder.append(")");    
    out.println(stringBuilder.toString());    
    out.print(result);    
    out.flush();    
    out.close();    
1
1
分享到:
评论

相关推荐

    jQuery使用JSONP实现跨域获取数据的三种方法详解

    主要介绍了jQuery使用JSONP实现跨域获取数据的三种方法,结合实例形式对比分析了jsonp跨域获取数据的3种常用操作技巧,需要的朋友可以参考下

    使用jquery的jsonp如何发起跨域请求及其原理详解

    本文主要给大家介绍的是关于jquery jsonp发起跨域请求及其原理的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的...

    详解js跨域请求的两种方式,支持post请求

    常用的jquery实现跨域调用 $.ajax({ url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php", dataType: "jsonp", jsonp: "callback", context: document.body, success: function(data) { ...

    浅析JSONP解决Ajax跨域访问问题的思路详解

    难道是这里的问题,经过检查和调试,发现原来是同源策略在作怪,我们知道,JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术。在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”...

    jQuery 跨域访问解决原理案例详解

    好在,有jQuery帮忙,跨域问题似乎没那么难缠了。这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题。。。有必要记下来备忘, 跨域的安全限制都是指浏览器端来说的。...

    详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】

    3.3、jQuery使用JSONP跨域 3.4、跨域资源共享(CORS) 3.5、小结 四、弹出层 五、模板引擎 5.1、Hello World 5.2、方法 5.3、与AJAX结合应用 六、示例下载 一、AJAX示例 AJAX全称为“Asynchronous JavaScript And...

    关于jQuery.ajax()的jsonp碰上post详解

    主要介绍了关于jQuery.ajax()的jsonp碰上post的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。

    Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别

    于是乎活动页面做完了,以后也没有碰到过jsonp,在这期间我一直以为jsonp跟ajax息息相关,是xhr的一种特殊的跨域形式…直到一个月前的一次面试,问到jsonp我被虐成狗,才决定看下jsonp,好吧,原来jsonp也不是很难。...

    javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】

    本文实例讲述了javascript和 jQuery中的AJAX技术。分享给大家供大家参考,具体如下: 1.什么是AJAX? AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发...

    JavaScript用JSONP跨域请求数据实例详解

    最近因为工作需要,需要把爱词霸的每日一句引入到页面上,爱词霸向外开放了 API, 接口返回 json 数据,为了让页面更轻巧,我没有用 jQuery,而是直接纯 js 写了一段代码: [removed] function httpGetAsync(theUrl...

    Node.js返回JSONP详解

    在使用JQuery的Ajax从服务器请求数据或者向服务器发送数据时常常会遇到跨域无法请求的错误,常用的解决办法就是在Ajax中使用JSONP。基于安全性考虑,浏览器会存在同源策略,然而[removed]标签却具有跨域访问数据的...

    一看就懂:jsonp详解

    json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是“用来跨域的”,一直不知道具体是个什么东西。今天总算搞明白了。下面一步步来搞清楚jsonp是个什么玩意。 同源策略 首先基于安全的原因,...

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    JSONP跨域请求jQuery方式 JSONP跨域请求本质 XSS过滤以及单例模式 博客系统表结构讲解 博客系统功能讲解 CMDB介绍 CMDB实现的三种方式 CMDB Agent客户端示例 第26周 今日内容概要以及CMDB介绍 前端插件定制之表头 ...

    json跨域调用python的方法详解

    本文实例讲述了json跨域调用python的方法。分享给大家供大家参考,具体如下: 客户端: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

    python入门到高级全栈工程师培训 第3期 附课件代码

    02 jquery循环方法和attr,prop方法 03 jquery模态对话框与clone的应用 04 jqueryCSS操作之offsets,position以及scrolltop 05 jquery事件绑定与事件委托 06 jquery动画效果 07 jquery扩展与插件 08 jquery扩展补充 09...

Global site tag (gtag.js) - Google Analytics