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>