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
