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

Jquery中jsonp的使用

  1. //myUrl = "http://localhost:8090/api/test";
  2. $.ajax({
  3.   type:"GET",
  4.   url:myUrl,
  5.   dataType:"jsonp",
  6.   jsonp:"callback",
  7.   jsonpCallback:"jsonpCallback",
  8.   success:function(data){
  9.     alert(data.msg);
  10.   }
  11. });
  12. function jsonpCallback(data){
  13.   alert(data);
  14. }
  1. jsonp只能使用get请求,解决同源问题,返回javascript代码,因为请求javascript文件是没有同源问题的。
  2. 当请求数据类型为jsonp时,会将callback=jsonpCallback加在url上,http://localhost:8090/api/testcallback=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的使用

  1. myUrl = "http://localhost:8090/api/testcallback=JSON_CALLBACK";
  2. $http.jsonp(myUrl).success(
  3.   function(data){
  4.     alert(data);
  5.   }
  6. );
  1. angularJS中使用$http.jsonp函数
  2. 指定callback和回调函数名,函数名为JSON_CALLBACK时,会调用success回调函数,JSON_CALLBACK必须全为大写。
  3. 也可以指定其它回调函数,但必须是定义在window下的全局函数。
  4. url中必须加上callback
  5. 当callback为JSON_CALLBACK时,只会调用success,即使window中有JSON_CALLBACK函数,也不会调用该函数。
 Servlet中的使用
  1. @Override
  2. protectedvoiddoPost(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{
  3.   resp.setContentType("application/json;charset=UTF-8");
  4.   PrintWriterout=resp.getWriter();
  5.   StringcallbackFunName=req.getParameter("callback");
  6.   StringBuilderstringBuilder=newStringBuilder(callbackFunName);
  7.   stringBuilder.append("(");
  8.   stringBuilder.append(123);
  9.   stringBuilder.append(")");
  10.   out.println(stringBuilder.toString());
  11.   out.print(result);
  12.   out.flush();
  13.   out.close();
  14. }

详解Jquery和AngularJs,Servlet中jsonp解决跨域问题(转)的更多相关文章

  1. jquery及原生javascript对jsonp解决跨域问题实例详解

    jquery方式 前端: $.ajax({ url: 'http://m.xxx.tv/goLottery', data: { data: data }, type: 'GET', dataType: ...

  2. HTML5中Access-Control-Allow-Origin解决跨域问题

    www.111cn.net 更新:2015-01-07 编辑:flyfox 来源:转载 跨域在开发中一些是一个比较常见的问题虽然有json或者xml来解决,现在html5开始流行了,我们可以通过Acc ...

  3. AJAX跨域问题解决方法(2)——JSONP解决跨域

    JSONP是什么?JSON全称为JSON with Padding,是JSON的一种补充的使用方式,不是官方协议. 使用JSONP服务器后台要改动吗?JSONP不同于一般的ajax请求返回json对象 ...

  4. JSONP解决跨域问题,什么是JSONP(转)

    原文链接:https://www.cnblogs.com/xinxingyu/p/6075881.html 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的 ...

  5. jsonp解决跨域问题

    日常开发网页中,时常遇到跨域问题,通常解决办法:后端提供的接口支持jsonp格式,前端采用dataType:jsonp. 一:Jquery封装的AJAX,dataType:jsonp格式的方法: $. ...

  6. CORS,jsonp解决跨域问题

    同源和跨域 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上 ...

  7. 非jsonp解决跨域问题

    1.服务器端解决跨域问题:配置filter在filter中设置请求头import java.io.IOException; import javax.servlet.Filter;import jav ...

  8. jQuery中jsonp的跨域处理,no access-control-allow-origin,unexpected token

    引言 ajax跨域就无法成功获取数据了,需要通过jsonp来处理 报错如下 1.改为jsonp var targeturl = ajaxurl+"?g=Api&m="+m+ ...

  9. 深入了解jsonp解决跨域访问

    在这个项目中,我们做的充分利用jsonp这是一个特点跨界,完成简单的单点登录认证和权限控制的统一.道,各有各的优点.各有各的优点,选择什么方式实现全然取决于我们自己或者项目经理的开发经验,对各种框架的 ...

随机推荐

  1. 中国用户mac上快速安装nodejs

    mac nodejs 安装 1.http://npm.taobao.org/mirrors/node/latest/ 进入这个域名,然后找到最新的pkg包下载过来 2.双击pkg包,下一步下一步安装 ...

  2. XML约束——DTD约束

    参考: 方立勋老师的讲课视频.   什么是XML约束 •在XML技术里,可以编写一个文档来约束一个XML文档的书写规范,这称之为XML约束. 为什么需要XML约束 常用的约束技术 •XML DTD • ...

  3. 前端代码新写法——Zen Coding

    是不是还在为html繁琐的标签写法而苦恼? 是不是还在枯燥的写尖括号? Zen Coding的到来将让前端编码不在繁琐.不再拘泥html的尖括号和一堆一堆的标签. 先看看ZenCoding的效果图. ...

  4. mysql 查询开销 sending data

    1.执行一个查询,发现时间开销都在sending data,为什么?2.sending data容易误导,让人以为只是发送数据给客户端,实际上sending data包含两个过程:读取数据并处理,发送 ...

  5. asc.desc

    DESC 是descend 降序意思 asc 是ascend 升序的意思

  6. C++模板(基础)

    本文转至:http://www.cnblogs.com/gw811/archive/2012/10/25/2738929.html C++模板 模板是C++支持参数化多态的工具,使用模板可以使用户为类 ...

  7. SDL2.0的几何图行绘画

    SDL2.0的几何图形绘画 通过SDL_Window.SDL_Renderer.SDL_Texture三者实现了简单的几何图形绘画. 包括了SDL_RenderDrawPoint.SDL_Render ...

  8. git服务器搭建

    http://blog.sina.com.cn/s/blog_904dee7f0101gait.html http://www.centoscn.com/image-text/install/2014 ...

  9. PacBio下机数据解读

    今天被人问起如何看懂三代的下机数据,虽然解决了别人的问题,但感觉自己还是没有搞透. 基本的目录结构: |-- HG002new_O1l_BP_P6_021315b_MB_100pM | |-- D01 ...

  10. iOS 国际化多语言设置 xcode7

    iOS 国际化多语言设置 方式一: 1. 在storyboard中创建好UI,然后在 project 里面  Localizables 栏目里面,添加你需要的语言:默认是Englist; 比如这里我添 ...