同源策略與Jsonp

時間 2019-11-13

標籤同源策略 jsonp 欄目 JSON 简体版

原文原文鏈接

1同源策略：　　

　　定義：同源測略是一種約定，它是瀏覽器最核心也是最基本的安全功能，缺乏了同源策略，瀏覽器的正常功能就會受到影響，所謂同源就是域名，協議，端口相同。css

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

(2)Jsonp

jsonp是josn用來跨域的，原理是經過script標籤的跨域特性來繞過同源策略python

jsonp的簡單實現模式就是jsonp的原型，就是建立一個回調函數，而後在遠程服務器上調用這個函數json數據形式做爲參數傳遞，完成回調將JSON數據填充進回調函數，這就是JSONP的JSON+Padding的含義。

藉助script標籤實現跨域請求事例：jquery

　　事例：ajax

　　　　項目一django

url
     url(r'^index/', views.index),
    url(r'^ajax_send/', views.ajax_send),

---------------------------------------------------------------
HTML
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
<h2>項目1</h2>
<button>send ajax</button>
<span class="ky">kuayu</span>
<p><span class="getJsonp">getJsonp</span></p>
<p><span class="final_ajax">final_ajax</span></p>
<p><span class="jiangxiTV">jiangxiTV</span></p>
<a href="http://127.0.0.1:8011/ajax_send2/">跳轉</a>
<hr>
<div class="show_list">
    
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>

<script>

    //
    $("button").click(function () {

        $.ajax({
            url:"http://127.0.0.1:8011/ajax_send2/",
            success:function (data) {
                console.log(data)
            }
        })

    });
    function foo(arg) {
        console.log(arg)
    }


    // 動態生成script標籤

    function add_scipt(url) {
         var ele_script=$("<script>");  //
         ele_script.attr("src",url);
         ele_script.attr("id","dy_tag");
         $("body").append(ele_script);
         $("#dy_tag").remove()
    }
    $(".ky").click(function () {

        add_scipt("http://127.0.0.1:8011/ajax_send2/?callbacks=foo")

    });



    // jquery:  getJsonp

    $(".getJsonp").click(function () {

        $.getJSON("http://127.0.0.1:8011/ajax_send2/?callbacks=?",{"name":123},function (data) {
            console.log(data)
        })
    });
    
    
    // final_ajax
    
    $(".final_ajax").click(function () {

        $.ajax({
            url:"http://127.0.0.1:8011/ajax_send2/",
            dataType:"jsonp",
            jsonp: 'callbacks',
            success:function (data) {
                console.log(data)
            }
        })

    })



    // 跨域請求實例
    $(".jiangxiTV").click(function () {

        $.ajax({
            url:"http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403",
             dataType: 'jsonp',
             jsonp: 'callback',
             jsonpCallback: 'list',
             success:function (data) {
                 console.log(data.data);   //  [{},{},{},{},{},{}]
                 week_list=data.data;
                 
                 $.each(week_list,function (i,j) {
                     console.log(i,j);  // 1 {week: "週一", list: Array(19)}
                     s="<p>"+j.week+"列表</p>";
                     $(".show_list").append(s);

                     $.each(j.list,function (k,v) {  // {time: "0030", name: "通宵劇場六集連播", link: "http://www.jxntv.cn/live/jxtv2.shtml"}
                          a="<p><a href='"+v.link+"'>"+v.name+"</a></p>";
                          $(".show_list").append(a);
                     })
                 })
                 
             }
        })


    })

</script>


</body>
</html>
--------------------------------------------------------------------
views
        
          def index(request):

    return render(request,"index.html")

def ajax_send(request):
    print("111111111")
    return HttpResponse("項目1")

項目二

url
    url(r'^index/', views.index),
    url(r'^ajax_send2/', views.ajax_send2),
    
-----------------------------------------------------------------------
HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>

</head>
<body>
<h2>項目2</h2>
<button>send ajax</button>


<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>

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

        $.ajax({
            url:"/ajax_send2/",
            success:function (data) {
                console.log(data)
            }
        })

    })
</script>
</body>
</html>

------------------------------------------------------------------------- views函數
 from django.shortcuts import render,HttpResponse
 # Create your views here.

 def index(request): 

return render(request,"index.html") 

def ajax_send2(request):

 func_name=request.GET.get("callbacks")
 import json
 print(222222222)
 print(request.GET)
 print(func_name) 

# jQuery32104784307525424374_1512015579023

  s={"name":"egon","age":123} 

return HttpResponse("%s(%s)"%(func_name,json.dumps(s))) 

def foo():

 return HttpResponse("list({})")

回調函數是最簡便的

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。