zoukankan      html  css  js  c++  java
  • Ajax -> java 跨域访问Json

    本人为初学,如有问题,请指出,谢谢!

    使用jsonp跨域获取json数据。Ajax获取JAVA服务器json数据。

    JSONP(JSON with Padding)是JSON的 一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。

    由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通。

    目前了解到的解决方法:

    解决方法一:使用协议,开启CORS,支持跨域访问

    在Servlet 中代码:

     1 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
     2         response.setHeader("Access-Control-Allow-Origin", "*");//开启CORS,支持跨域访问
     3         response.setContentType("text/plain");
     4 //TODO
     5         String callbackFunName = request.getParameter("callback");//接收回调函数名
     6             String json =  "{"records":[{"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},{"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"}]}";
     7             String callbackJson = callbackFunName + "(" + json + ");";
     8 
     9         //输出
    10             System.out.println(callbackJson);//输出调试
    11             PrintWriter out = response.getWriter();
    12             out.print(callbackJson);
    13             out.flush();
    14             out.close();
    15     }

    HTML代码:

      Jquery.Ajax 或 Jquery.getJSON

     1 $(function(){
     2     //$.ajax
     3         $.ajax({
     4             type:"get",
     5             async:false,
     6             url:"http://localhost:8080/AjaxServlet?callback=?",
     7             datatype:"jsonp",
     8             success:function(data){
     9                 alert("success: " + data);
    10             },
    11             error:function(err){
    12                 alert("failed");
    13             }
    14         });    
    15     //$.getJSON
    16          $.getJSON("http://localhost:8080/AjaxServlet?callback=?",function(result){
    17             console.log(result);  
    18          });
    19     });

      AngulgrJs的$http.jsonp

     1 <body>
     2 
     3 <div ng-app="myApp" ng-controller="namesCtrl">
     4 
     5 <p>循环对象:</p>
     6 <ul>
     7   <li ng-repeat="x in person | orderBy:'country'">
     8     {{ x.Name + ', ' + x.Country }}
     9   </li>
    10 </ul>
    11 
    12 </div>
    13 
    14 
    15 <script type="text/javascript">
    16     angular.module('myApp',[]).controller('namesCtrl',function($scope,$http){
    17             $http.jsonp('http://localhost:8080/AjaxServlet?callback=JSON_CALLBACK').success(function(data){
    18                 $scope.person = data.records;
    19             }).error(function(err){
    20                 alert('error:'+err);
    21             });
    22     });
    23     //注:$http.jsonp的回调函数必须是"JSON_CALLBACK"
    24 </script>
    25 </body>

    解决方法二:利用 <script> 元素的这个开放策略

     HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

    那JSONP是如何工作的呢,我们知道,由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。若要跨域请求出于安全性考虑是不行的,但是我们发现,Web页面上调用js文件时则不受是否跨域的影响,而且拥有”src”这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>,这时候,聪明的程序猿就想到了变通的方法,如果要进行跨域请求, 通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递 javascript对象。即在跨域的服务端生成JSON数据,然后包装成script脚本回传,着不就突破同源策略的限制,解决了跨域访问的问题了么。

    在Servlet 中代码:

     1 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
     2         //response.setHeader("Access-Control-Allow-Origin", "*");//不需要开启CORS
     3         response.setContentType("text/plain");
     4     //TODO
     5         String callbackFunName = request.getParameter("callback");//接收回调函数名
     6         String json ="{"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"}";
     7         String callbackJson = callbackFunName + "(" + json + "); ";//js方法:jsonpCallback({"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"});
     8 
     9         //输出
    10         System.out.println(callbackJson);//输出调试
    11         PrintWriter out =  response.getWriter();
    12         out.print(callbackJson);
    13         out.flush();
    14         out.close();
    15     }

    HTML代码

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 
     6 </head>
     7 <body>
     8 <script>
     9     function jsonpCallback(result){  
    10     console.log(result); 
    11   }
    12 </script>
    13 
    14 <!-- js方法一定要你放在此标签前.(注:jsonpCallback为你要执行的方法名) -->
    15 <script src="http://localhost:8080/AjaxServlet?callback=jsonpCallback"></script>
    16 
    17 </body>
    18 </html>
    19             

    详细代码:http://download.csdn.net/download/oofgdoo/9394421

  • 相关阅读:
    如何删除完全重复的列
    串联多个字符串,引发string和stringBuilder的比较
    借鉴ANJOU的方法改写了上次的TreeView
    如何改变ListBox中内容的顺序
    执行Insert语句时使用string的Format用法
    moss 2007 中FCKEditor编辑器的使用
    qt 获得cmd 命令运行的结果 GIS
    迭代器 GIS
    win32 创建带图片的button GIS
    c++标准库的构成 GIS
  • 原文地址:https://www.cnblogs.com/jkguo/p/5106621.html
Copyright © 2011-2022 走看看