跨域JSONP 获取内容

跨域JSONP原理及调用具体示例

分类: 小笔记 跨域 浏览器 JSONP CORS
2014-10-12 11:29
3221人阅读
评论(0)
收藏
举报

上篇博客介绍了同源策略和跨域访问概念,其中提到跨域常用的基本方式:JSONP和CORS。

那这篇博客就介绍JSONP方式。

 JSONP原理

在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img、iframe、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。

而JSONP就是通过script节点src调用跨域的请求。

当我们通过JSONP模式请求跨域资源时,服务器返回给客户端一段javascript代码,这段javascript代码自动调用客户端回调函数。

举个例子

客户端http://localhost:8080访问服务器http://localhost:11111/user,正常情况下,这是不允许的。因为这两个URL是不同域的。

若我们使用JSONP格式发送请求的话?

http://localhost:11111/user?callback=callbackfunction

则服务器返回的数据如下:

callbackfunction({"id":1,"name":"test"})

仔细看看服务器返回的数据,其实就是一段javascript代码,这就是函数名(参数)格式。

服务器返回后,则自动执行callbackfunction函数。

因此,客户端需要callbackfunction函数,以便使用JSONP模式返回javascript代码后自动执行其回调函数。

  注意:其中url地址中的callback和callbackfunction是随意命名的。

  

具体的JS实现JSONP代码。

JS中:

[html] 
view plain
copy

  1. <script>
  2. var url = "http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=callbackfunction";
  3. var script = document.createElement(‘script‘);
  4. script.setAttribute(‘src‘, url);  //load javascript
  5. document.getElementsByTagName(‘head‘)[0].appendChild(script);
  6. //回调函数
  7. function callbackfunction(data){
  8. var html=JSON.stringify(data.RESULTSET);
  9. alert(html);
  10. }

服务器代码Action:

后台返回的json外面需要由回调函数包裹。具体的方法如下:

[html] 
view plain
copy

  1. public class TestJson extends ActionSupport{
  2. @Override
  3. public String execute() throws Exception {
  4. try {
  5. JSONObject jsonObject=new JSONObject();
  6. List list=new ArrayList();
  7. for(int i=0;i<4;i++){
  8. Map paramMap=new HashMap();
  9. paramMap.put("bank_no", 100+i);
  10. paramMap.put("money_type", i);
  11. paramMap.put("bank_name", i);
  12. paramMap.put("bank_type", i);
  13. paramMap.put("bank_status", 0);
  14. paramMap.put("en_sign_ways", 1);
  15. list.add(paramMap);
  16. }
  17. JSONArray rows=JSONArray.fromObject(list);
  18. jsonObject.put("RESULTSET", rows);
  19. HttpServletRequest request=ServletActionContext.getRequest();
  20. HttpServletResponse response=ServletActionContext.getResponse();
  21. response.setContentType("text/javascript");
  22. boolean jsonP = false;
  23. String cb = request.getParameter("jsonp");
  24. if (cb != null) {
  25. jsonP = true;
  26. System.out.println("jsonp");
  27. response.setContentType("text/javascript");
  28. } else {
  29. System.out.println("json");
  30. response.setContentType("application/x-json");
  31. }
  32. response.setCharacterEncoding("UTF-8");
  33. Writer out = response.getWriter();
  34. if (jsonP) {
  35. out.write(cb + "("+jsonObject.toString()+")");
  36. System.out.println(jsonObject.toString());
  37. }
  38. else{
  39. out.write(jsonObject.toString());
  40. System.out.println(jsonObject.toString());
  41. }
  42. } catch (Exception e) {
  43. e.printStackTrace();
  44. }
  45. return null;
  46. }
  47. }

 JQUERY实现JSONP代码。

Jquery从1.2版本开始也支持JSONP的实现。

[html] 
view plain
copy

  1. $(function(){
  2. jQuery.getJSON("http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=?",function(data)
  3. {
  4. var html=JSON.stringify(data.RESULTSET);
  5. $("#testjsonp").html(html);
  6. }
  7. );
  8. });

第一个?代表后面是参数,与咱们一般调用一样。重要的是第二个?,则是jquery动态给你生成毁掉函数名称。


至于后台代码和上述一致,使用同一个后台。

JQUERY中Ajax实现JSONP代码。

[html] 
view plain
copy

  1. $.ajax({
  2. type:"GET",
  3. async :false,
  4. url:"http://localhost:8080/crcp/rcp/t99eidt/testjson.do",
  5. dataType:"jsonp",
  6. success:function(data){
  7. var html=JSON.stringify(data.RESULTSET);
  8. $("#testjsonp").html(html);
  9. },
  10. error:function(){
  11. alert("error");
  12. }
  13. });

注意:这种形式,默认的参数是callback,而不是会是其他。则action代码中获取calback值则

String cb=request.getParameter("callback");

并且生成的回调函数,默认也是类似上述一大串数字。

根据Ajax手册,更改callback名称以及回调函数名称。

http://www.w3school.com.cn/jquery/ajax_ajax.asp

jsonp:jsonp,则请求的地址为:
http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=自动生成回调函数名

jsonpCallback:callbackfunction,则请求的地址为:

http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=callbackfunction

最后返回前台的是:

callbackfunction(具体的json值)

其中上述JS实现JSONP代码中,若不是动态拼接script脚本,而是直接写script标签,类似如下:

<script type="text/javascript" src=""></script>

若这样写的话,通过debug发现,的确正确返回了,但是一直提示找不到回调函数。即使js也提供了回调函数【各个浏览器都测试】

若要通过JS来显示,则通过代码动态create script标签。

JSONP跨域方式,很方便,同时也支持大多部分浏览器,但是唯一缺点是,只支持GET提交方式,不支持其他POST提交。

若url地址传输的参数过多,如何实现呢?下篇博客会讲解另一种跨域方案CROS原理以及具体调用示例。

本文转载自:http://blog.csdn.net/yuebinghaoyuan/article/details/32706277

时间: 2024-10-06 00:41:33

跨域JSONP 获取内容的相关文章

jQuery $.ajax跨域-JSONP获取JSON数据(转载)

Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索.使用 XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器.Ajax 也是许多 mashup 的驱动力,它可将来自多个地方的内容集成为单一 Web 应用程序. 不过,由于受到浏览器的限制,该

使用图片跨域方式获取图片数据 使用 jsonp 方式跨域获取数据

使用图片跨域方式获取图片数据 server.get(`/mockImg`, (req, res, next) => { // 使用图片跨域方式获取图片数据 req.headers.origin && res.setHeader(`Access-Control-Allow-Origin`, req.headers.origin) res.setHeader(`content-type`, `image/gif`) res.setHeader(`data`, `image/gif`) v

跨域JSONP原理及调用具体示例

上篇博客介绍了同源策略和跨域访问概念,其中提到跨域常用的基本方式:JSONP和CORS. 那这篇博客就介绍JSONP方式. JSONP原理 在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img.iframe.script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据. 而JSONP就是通过script节点src调用跨域的请求. 当我们通过JSONP模式请求跨域资源时,服务器返回给客户端一段javascript代码,这段javascript代码自动调用客

跨域JSONP

一.什么是同源策略 同源策略:同源是指域名.协议.端口均相同 跨域:是指从一个域名的网页去请求另一个域名的资源,只要域名.协议.端口有一个不同,就被当作是跨域 JSONP是我们解决跨域最常用的方式 二.JSONP的原理 JSONP是JSON with Padding的简写,是一种跨域的解决方案 JSONP由两部分解组成:回调函数和数据.回调函数是当相应到来的时候,应该在页面中调用的函数,数据就是传回回调函数中的JSON数据 JSONP的原理:我们直接用XMLHttpRequest请求不同域上的数

jquery中的跨域-jsonp格式

js要跨域jsonp格式,原理就是在html中插入一端js引用去调用远程地址: <script type="text/javascript" src="http://xxx.aspx?callback=test"></script> jquery客户端代码如下: $.ajax({ type:'get', url:'http://xxxx.ashx', dataType:'jsonp', jsonpCallback参数表示服务器返回数据的标志

14、跨域 - jsonp

## 同源策略 协议 域名 端口    3个都一致叫同域,有1个不一致叫跨域 ## 为什么浏览器不支持跨域 cookie LocalStorage DOM元素也有同源策略    iframe ajax 也不支持跨域 ## 实现跨域 -  jsonp -  cors -  postMessage -  document.domain    子域和父域 -  window.name -  location.hash -  http-proxy    反向代理 -  nginx -  websocke

ajax跨域请求获取jsonp数据

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script src="jquery.js"></script><script type="text/javascript">function getIntface(){ //?

jQuery使用ajax跨域请求获取数据

跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免的需要进行跨域操作,所以跨域能力也算是前端工程师的基本功之一. var webMethod = "http://localhost:54473/Service1.asmx/HelloWorld"; jQuery.support.cors = true; //之前没有加这句老是提示no tr

跨域问题解决方案(HttpClient安全跨域 &amp; jsonp跨域)

1 错误场景 今天要把项目部署到外网的时候,出现了这样的问题, 我把两个项目放到自己本机的tomcat下, 进行代码调试, 运行 都没有问题的, 一旦把我需要调用接口的项目B放到其他的服务器上, 就会报错, 无法通过Ajax调用springMVC的接口, 这是什么原因呢? 当我使用json ajax post请求传递数据的时候在web端出错:XMLHttpRequest cannot loadhttp://ip:8082/security/auth/outside.do. Origin http