python-day91--同源策略與Jsonp

時間  2019-11-24
標籤 python day91 day 同源 策略 jsonp 欄目 Python 简体版
原文   原文鏈接

1、同源策略javascript

同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，若是缺乏了同源策略，則瀏覽器的正常功能可能都會受到影響。能夠說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。html

同源策略，它是由Netscape提出的一個著名的安全策略。如今全部支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協議，端口相同。當一個瀏覽器的兩個tab頁中分別打開來 百度和谷歌的頁面當瀏覽器的百度tab頁執行一個腳本的時候會檢查這個腳本是屬於哪一個頁面的，即檢查是否同源，只有和百度同源的腳本纔會被執行。 若是非同源，那麼在請求數據時，瀏覽器會在控制檯中報一個異常，提示拒絕訪問。
 
示例：
　項目1: 
==================================http://127.0.0.1:8001項目的index
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>


<button>ajax</button>
{% csrf_token %}

<script>
    $("button").click(function(){


        $.ajax({
            url:"http://127.0.0.1:7766/SendAjax/",
            type:"POST",
            data:{"username":"yuan","csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()},
            success:function(data){
                alert(123);
                alert(data)
            }
        })
    })
</script>
</body>
</html>


==================================http://127.0.0.1:8001項目的views

def index(request):


    return render(request,"index.html")


def ajax(request):
    import json
    print(request.POST,"+++++++++++")
    return HttpResponse(json.dumps("hello"))
View Code

   項目2:前端

==================================http://127.0.0.1:8002項目的index
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>


<button>sendAjax</button>

{% csrf_token %}

<script>
    $("button").click(function(){


        $.ajax({
            url:"/SendAjax/",
            type:"POST",
            data:{"username":"yuan","csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()},
            success:function(data){
                alert(data)
            }
        })
    })
</script>

</body>
</html>


==================================http://127.0.0.1:8002項目的views

def index(request):

    return render(request,"index.html")

from django.views.decorators.csrf import csrf_exempt

@csrf_exempt


def SendAjax(request):

    import json

    print("++++++++")

    return HttpResponse(json.dumps("hello2"))
View Code

當點擊項目1的按鈕時，發送了請求，可是會發現報錯以下：java

已攔截跨源請求：同源策略禁止讀取位於 http://127.0.0.1:7766/SendAjax/ 的遠程資源。（緣由：CORS 頭缺乏 'Access-Control-Allow-Origin'）。

可是注意，項目2中的訪問已經發生了，說明是瀏覽器對非同源請求返回的結果作了攔截。請求完成了，就是瀏覽器在渲染的時候驗證是否同源，其實數據已經返回給了瀏覽器jquery

 

 

2、Jsonpajax

JSONP(JSON with Padding)是JSON的一種「使用模式」，可用於解決主流瀏覽器的跨域數據訪問的問題。因爲同源策略，通常來講位於 server1.example.com 的網頁沒法與不是 server1.example.com的服務器溝通，而 HTML 的<script> 元素是一個例外。利用 <script> 元素的這個開放策略，網頁能夠獲得從其餘來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP。django

jsonp是json用來跨域的一個東西。原理是經過script標籤的跨域特性來繞過同源策略。json

藉助script標籤，實現跨域請求，示例：後端

# =============================http://127.0.0.1:8001/index


<button>ajax</button>
{% csrf_token %}

<script>
    function func(name){
        alert(name)
    }
</script>

<script src="http://127.0.0.1:8002/SendAjax/"></script>


# =============================http://127.0.0.1:8002/
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt


def SendAjax(request):         #在實際工做中有的數據須要別的公司提供，這個函數的做用就是提供了一個接口，它把你須要的數據打包，告訴你這個接口，你到這個接口來取就好了 import json        #引用json 進行序列化的緣由是，在返回值 func 內要的必須是字符串 print("++++++++")
    # dic={"k1":"v1"}
    return HttpResponse("func('yuan')")  # return HttpResponse("func(%s)"%json.dumps(dic))
　　　　　　　　　　　　　　　　　　　　　　　　 #在後端取到的data是json對象轉化後的js對象 能夠直接用js對象的方法進行處理

這其實就是JSONP的簡單實現模式，或者說是JSONP的原型：建立一個回調函數，而後在遠程服務上調用這個函數而且將JSON 數據形式做爲參數傳遞，完成回調。跨域

將JSON數據填充進回調函數，這就是JSONP的JSON+Padding的含義。

 通常狀況下，咱們但願這個script標籤可以動態的調用，而不是像上面由於固定在html裏面因此沒等頁面顯示就執行了，很不靈活。咱們能夠經過javascript動態的建立script標籤，這樣咱們就能夠靈活調用遠程服務了。

複製代碼 
<button onclick="f()">sendAjax</button>

<script>
    function addScriptTag(src){
         var script = document.createElement('script');
         script.setAttribute("type","text/javascript");
         script.src = src;
         document.body.appendChild(script);
         document.body.removeChild(script);
    }


   // function func(name){
   //     alert("hello"+name)
   // }

    function f(){
         addScriptTag("http://127.0.0.1:7766/SendAjax/")
    }
</script>
複製代碼

爲了更加靈活，如今將你本身在客戶端定義的回調函數的函數名傳送給服務端，服務端則會返回以你定義的回調函數名的方法，將獲取的json數據傳入這個方法完成回調：

將8001的f()改寫爲：

function f(){
         addScriptTag("http://127.0.0.1:7766/SendAjax/?callbacks=func")
    }

8002的views改成：

def SendAjax(request):
 
    import json
 
    dic={"k1":"v1"}
 
    print("callbacks:",request.GET.get("callbacks"))
    callbacks=request.GET.get("callbacks")
 
    return HttpResponse("%s(%s)"%(callbacks,json.dumps(dic)))

3、jQuery對JSONP的實現

1.getJSON：    getJSON對jsonp封裝了  動態建立script標籤和 自動產生隨機的字符串看成函數名，而後調用匿名函數處理數據

jQuery框架也固然支持JSONP，可使用$.getJSON(url,[data],[callback])方法

8001的html改成：

<button onclick="f()">sendAjax</button>

<script>

    function f(){
          $.getJSON("http://127.0.0.1:7766/SendAjax/?callbacks=?",function(arg){
            alert("hello"+arg)
        });
    }
    
</script>

8002的views不改動。

結果是同樣的，要注意的是在url的後面必須添加一個callback參數，這樣getJSON方法纔會知道是用JSONP方式去訪問服務，callback後面的那個問號是內部自動生成的一個回調函數名。

      此外，若是說咱們想指定本身的回調函數名，或者說服務上規定了固定回調函數名該怎麼辦呢？咱們可使用$.ajax方法來實現

2. $.ajax

8001的html改成：

<script>

    function f(){
          $.ajax({
                url:"http://127.0.0.1:7766/SendAjax/",
                dataType:"jsonp",
                jsonp: 'callbacks',
                jsonpCallback:"SayHi"
           });

       }

    function SayHi(arg){
                alert(arg);
            }

</script>

8002的views不改動。

固然，最簡單的形式仍是經過回調函數來處理：

複製代碼 
<script>

    function f(){

            $.ajax({
               url:"http://127.0.0.1:7766/SendAjax/",
               dataType:"jsonp",            //必須有，告訴server，此次訪問要的是一個jsonp的結果。
               jsonp: 'callbacks',          //jQuery幫助隨機生成的：callbacks="wner"
               success:function(data){
                   alert("hi "+data)
              }
         });

       }

</script>
複製代碼

  jsonp: 'callbacks'就是定義一個存放回調函數的鍵，jsonpCallback是前端定義好的回調函數方法名'SayHi'，server端接受callback鍵對應值後就能夠在其中填充數據打包返回了; 

jsonpCallback參數能夠不定義，jquery會自動定義一個隨機名發過去，那前端就得用回調函數（success）來處理對應數據了。利用jQuery能夠很方便的實現JSONP來進行跨域訪問。　　

注意 JSONP必定是GET請求，即便你寫成了post 發送的也是get請求

3.練習

<input type="button" onclick="AjaxRequest()" value="跨域Ajax" />


<div id="container"></div>


    <script type="text/javascript">
        function AjaxRequest() {
            $.ajax({
                url: 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403',
                type: 'GET',
                dataType: 'jsonp',
                jsonp: 'callback',
                jsonpCallback: 'list',
                success: function (data) {
                    
                    $.each(data.data,function(i){
                        var item = data.data[i];
                        var str = "<p>"+ item.week +"</p>";
                        $('#container').append(str);
                        $.each(item.list,function(j){
                            var temp = "<a href='" + item.list[j].link +"'>" + item.list[j].name +" </a><br/>";
                            $('#container').append(temp);
                        });
                        $('#container').append("<hr/>");
                    })

                }
            });
        }
</script>
View Code
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程