同源策略与Jsonp

1同源策略：　　

　　定义：同源测略是一种约定，它是浏览器最核心也是最基本的安全功能，缺少了同源策略，浏览器的正常功能就会受到影响，所谓同源就是域名，协议，端口相同。

　　拦截跨源请求：同源策略禁止读取位于 http://127.0.0.1:7766/SendAjax/ 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。

(2)Jsonp

jsonp是josn用来跨域的，原理是通过script标签的跨域特性来绕过同源策略

jsonp的简单实现模式就是jsonp的原型，就是创建一个回调函数，然后在远程服务器上调用这个函数json数据形式作为参数传递，完成回调将JSON数据填充进回调函数，这就是JSONP的JSON+Padding的含义。

借助script标签实现跨域请求事例：

　　事例：

　　　　项目一

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>