ajax的跨域请求 - meiLinYa

ajax的跨域请求

温故而知新。

　　　　今天主要来了解一下ajax的跨域请求，及原理，以及jsonp的使用

　　1.什么是跨域　　　

http://www.a.com è http://www.b.com 是跨域

http://www.a.com è http://www.a.com:8080 是跨域

http://a.a.com è http://b.a.com 是跨域

http://www.a.com è http://www.a.com/api 不是

总结：　　

　　不同的域名或不同的端口都是跨域请求。

　　2.ajax的跨域请求原理

　使用代码来说明ajax的原理：

　　taotao-manage-web项目:

json.jsp页面

1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2     pageEncoding="UTF-8"%>
3 <%
4      out.print("{\"abc\":1222}"); 
5 %>

test_json.htm页面：　　　

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <script type="text/javascript"
 7     src="http://manage.taotao.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
 8 <script type="text/javascript">
 9     alert($);
10     $(function() {
11         $.ajax({
12             type : "get",
13             url : "js/json.htm",
14             dataType : "json",
15             success : function(data) {
16                 alert(data.abc);
17             }
18         });
19     });
20 </script>
21 </head>
22 <body>
23 
24 </body>
25 </html>

以上是普通的通过啊Ajax获取数据，如果正确的话应该可以弹出两条信息

再写一个test_json2.htm

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <script type="text/javascript"
 7     src="http://manage.taotao.com/json.jsp"></script>
 8 </head>
 9 <script type="text/javascript">
10     function fun(data) {
11         alert(data.abc);
12     }
13 </script>
14 <body>
15 </body>
16 </html>

总结：

　　此时页面报错，找不到方法：因为它通过src去找js方法，可是我们的json的页面只有一个json数据。

然后我们将test_json.htm的代码改为：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <script type="text/javascript">
 7     function fun(data) {
 8         alert(data.abc);
 9     }
10 </script>
11 <script type="text/javascript"
12     src="http://manage.taotao.com/json.jsp?callback=fun"></script>
13 </head>
14 <body>
15 </body>
16 </html>

总结：

　　此时页面报错：原因为：它将我json.jsp页面的json数据当作js脚本语言运行

　　解决：只需要返回js脚本即可。

定义fun方法

此时我们将json.jsp页面的代码改为：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
     out.print("fun({\"abc\":1222})"); 
%>

将json数据用一个括号抱住加一个方法名

将test-json.htm拷贝到前台系统进行测试

　　然后将test_json2.htm复制到另一个项目中，taotao-web，记得两个项目同时启动，此时你会发现页面只谈出一个，并没有将我们json.jsp页面的abc弹出来。

1、 alert($) 可以正常弹出

2、 alert(data.abc) 不能够正常的弹出，出现跨域问题

总结：　

script标签的src可以跨域请求资源，但是ajax请求不可以跨域请求。

借助script的src跨域加载资源

　　test_json.htm页面：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <script type="text/javascript">
 7     function a(data) {
 8         alert(data.abc);
 9     }
10 </script>
11 <script type="text/javascript"
12     src="http://manage.taotao.com/json.jsp"></script>
13 </head>
14 <body>
15 
16 </body>
17 </html>

此时

1、 alert($) 可以正常弹出

2、 alert(data.abc)可以正常弹出

优化代码：

后台：json.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String callback = request.getParameter("callback");
    if (callback != null || !callback.equals("")) {
        //跨域请求
        out.print(callback + "({\"abc\":123})");
    } else {
        out.print("({\"abc\":1222})");
    }
%>

前台：test_json.htm:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function a(data) {
        alert(data.abc);
    }
</script>
<script type="text/javascript"
    src="http://manage.taotao.com/json.jsp?callback=a"></script>
</head>
<body>

</body>
</html>

　　3.如何使用jsonp

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
    src="http://manage.taotao.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript">
    alert($);
    $(function() {
        $.ajax({
            type : "get",
            url : "http://manage.taotao.com/json.jsp",
            dataType : "jsonp",
            success : function(data) {
                alert(data.abc);
            }
        });
    });
</script>
</head>
<body>

</body>
</html>

总结：

　　　我主要通过一个maven后台项目到前台项目的数据的传送来说明了 ajax的跨域请求问题，通过后台查询数据，@ResponseEntity返回json格式的数据，使用easyUi接收数据。展示jsp页面。

posted on 2018-05-04 14:31 meiLinYa 阅读(340) 评论(0) 收藏举报

刷新页面返回顶部