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 - 上一篇 »PHP 服务器端处理跨域问题
- 下一篇 »Javascript跨域问题