ajax cross domain request

Learn from the past.

　　　　Today, I will mainly learn about the cross-domain request of ajax, its principle, and the use of jsonp

　　1. What is cross domain　　　

http://www.a.com è http://www.b.com is cross-domain

http://www.a.com è http://www.a.com :8080 is cross domain

http://aacom è http://bacom is cross-domain

http://www.a.com è http://www.a.com/api is not

Summarize:　　

　　Different domain names or different ports are cross-domain requests .

　　2. The principle of cross-domain request of ajax

　Use code to illustrate the principle of ajax:

　　taotao-manage-web project:

json.jsp page

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

test_json.htm page:　　　

 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>

The above is an ordinary way to get data through Ajax. If it is correct, two messages should pop up.

Write another 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>

Summarize :

　　At this time, the page reports an error and cannot find the method: because it finds the js method through src, but our json page has only one json data.

Then we change the code of test_json.htm to:

 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>

Summarize:

　　At this time, the page reports an error: the reason is: it runs the json data of my json.jsp page as a js scripting language

　　Solution : Just return the js script .

define fun method

At this point we change the code of the json.jsp page to:

<%@ 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页面。