ajax的跨域请求

时间 2019-11-18

标签 ajax 请求栏目 Ajax 繁體版

原文原文链接

　　　　　　　　　　ajax的跨域请求javascript

温故而知新。html

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

　　1.什么是跨域　　　jquery

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

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

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

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

总结：　　

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

　　2.ajax的跨域请求原理jsp

　使用代码来讲明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弹出来。

一、 alert($) 能够正常弹出

二、 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>

此时

一、 alert($) 能够正常弹出

二、 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页面。