同源策略
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持javascript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。
url http ip port paht ? 数据
if 协议 IP PORT相同，同源
一，问题描述
1 django 创建2个项目 2 项目一，开启一个send_ajax请求 http://127.0.0.1:8000 3 访问正常 4 5 项目二，没有send_ajax请求 http://127.0.0.1:8010 6 那么这时候如果你通过ajax访问的 url:http://127.0.0.1:8000/send_ajax 7 浏览器会报错，内容是已拦截跨域请求，同源策略禁止读取位于http://127.0.0.1:8000/send_ajax远程资源，原因：cors头缺少 ‘Access-Control-Allow-Origin’
1.1 思考
1 跨域请求： 2 ajax请求一定会被拦截 3 4 核心任务：跨域请求的是数据，数据，数据 5 6 通过引入jquery cdn 可以跨域 我们想 是不是script标签不会被拦截呢？ 7 <script src=" https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
1.2跨域请求的演变
1 项目一 views 2 import json 3 def send_ajax(request): 4 return HttpResponse("yuan") # 第一次返回字符串 5 return HttpResponse("yuan()") # 第二次返回函数字符串 6 return HttpResponse("yuan(‘yuan‘)") # 第三次返回函数参数字符串 7 s=‘hello world‘ 8 return HttpResponse("yuan(‘%s‘)"%s) # 第四次返回函数字符串数据 9 10 s={"name":"egon","age":122} 11 return HttpResponse("%s(‘%s‘)"%(func_name,json.dumps(s))) # 第五次返回函数json字符串 12 13 项目二 html 14 第一次字符串，你要是知道数据是什么还请求干什么？所以这里只是个引子，告诉你可以这样做 15 <script>yuan</script> 16 <script src="http://127.0.0.1:8000/send_ajax"></script> 17 18 19 第二次函数字符串 20 <script>function yuan(){alert(123)}</script> 21 <script src="http://127.0.0.1:8000/send_ajax"></script> 22 23 24 第三次返回函数参数字符串 25 <script>function yuan(arg){alert(arg)}</script> 26 <script src="http://127.0.0.1:8000/send_ajax"></script> 27 28 29 第四次返回函数字符串数据（数据也是字符串） 30 <script>function yuan(arg){alert(arg)}</script> 31 <script src="http://127.0.0.1:8000/send_ajax"></script> 32 33 34 第五次返回函数json字符串 35 <script>function yuan(arg){alert(Json.parse(arg))}</script> 36 <script src="http://127.0.0.1:8000/send_ajax"></script>
1.3问题
1 我不能硬生生的将<script src="http://127.0.0.1:8000/send_ajax"></script>写在html里面，我需要动态创建下面的函数
我们通过触发点击事件函数创建
1 <script> 2 function yuan(arg) { 3 console.log(arg); 4 console.log(JSON.parse(arg)); 5 } 6 </script> 7 8 <script> 9 $(".send_ajax").click(function () { 10 kuayu_request("http://127.0.0.1:8000/send_ajax/") 11 }); 12 function kuayu_request(url) { 13 var $script=$("<script>"); // 创建script标签，是一个jquery对象： <script> 14 $script.attr("src",url); 15 $("body").append($script); 16 $("body script:last").remove(); 17 } 18 </script>
1.4 问题
1 1 问题函数名字是不是可以通过请求传送到后端呢？应该是同步的，可否通过回调函数？
可以通过发送请求的时候带着数据，数据包含你的函数名称，这样传到后端，再让后端返回你这个函数和数据，就可以执行了
1 项目二 html 2 <script> 3 $(".send_ajax").click(function () { 4 kuayu_request("http://127.0.0.1:8000/send_ajax/?callback=bar") 5 }); 6 function kuayu_request(url) { 7 var $script=$("<script>"); // 创建script标签，是一个jquery对象： <script> 8 $script.attr("src",url); 9 $("body").append($script); 10 $("body script:last").remove(); 11 } 12 </script> 13 14 15 项目一 views 16 def send_ajax(request): 17 func_name = request.GET.get(‘callback‘) 18 s = ‘hello‘ 19 return HttpResponse("%s(‘%s‘)"%(func_name,json.dump(s)))
之前都是引子，下面才是真正的用法。。
ajax的跨域请求写法
1 <script> 2 3 $(".send_ajax").click(function () { 4 5 $.ajax({ 6 url:"http://127.0.0.1:8000/send_ajax/", 7 success:function (data) { 8 alert(data) 9 }, 10 // 跨域请求 <script> 告诉服务器我要什么类型的数据contenttype是告诉服务器我是什么类型数据 11 dataType:"jsonp", 12 jsonp: ‘callbacks‘, //?callbacks=SayHi 相当于这个，问题就是在于前后端的函数名要相同 13 jsonpCallback:"SayHi" 14 }) 15 16 17 }); 18 19 function SayHi(arg) { 20 console.log("hello",arg) 21 } 22 </script> 23 24 {#// ==========================================基于jquery的JSONP的实现3 （推荐）#} 25 26 <script> 27 28 $(".send_ajax").click(function () { 29 30 $.ajax({ 31 url:"http://127.0.0.1:8000/send_ajax/", 32 dataType:"jsonp", // 跨域请求 <script> 33 // callbacks=? ？就是随机字符串了，后端传回来运行的就是success函数，也就是funciton 函数参数是数据 34 jsonp: ‘callbacks‘, 35 success:function (data) { 36 console.log(data) 37 } 38 }) 39 40 }); 41 42 </script>
jsonp的所有实现和应用例子
项目一的views.py
1 import json 2 def send_ajax(request): 3 s={"name":"egon","age":122} 4 return HttpResponse("list(‘%s‘)"%json.dumps(s))
项目二的index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script> 7 </head> 8 <body> 9 <h1>项目2的首页</h1> 10 <button class="send_ajax">send_ajax</button> 11 12 13 {#// ==========================================基于JS的JSONP的实现#} 14 <script> 15 function bar(arg) { 16 console.log(arg); 17 console.log(JSON.parse(arg)); 18 } 19 </script> 20 21 <script> 22 23 $(".send_ajax").click(function () { 24 kuayu_request("http://127.0.0.1:8000/send_ajax/?callback=bar") // 回调函数 25 }); 26 // 创建script添加scr属性，获取数据 27 function kuayu_request(url) { 28 var $script=$("<script>"); // 创建script标签，是一个jquery对象： <script> 29 $script.attr("src",url); 30 $("body").append($script); 31 $("body script:last").remove(); 32 } 33 34 </script> 35 36 37 <hr> 38 39 {#// ==========================================基于jquery的JSONP的实现1#} 40 41 42 <script> 43 44 $(".send_ajax").click(function () { 45 // getJSON帮助我们创建了script标签和src属性 ，还有个参数，data= 可以写入一些给后端的字符串 46 // 匿名函数，函数会有getJSON创建随机字符串也就是callbacks=?的问好的值，函数参数的data是数据 47 $.getJSON("http://127.0.0.1:8000/send_ajax/?callbacks=?",function (data) { 48 console.log(data) 49 }) 50 }) 51 52 </script> 53 54 55 {#// ==========================================基于jquery的JSONP的实现2#} 56 57 <script> 58 59 $(".send_ajax").click(function () { 60 61 $.ajax({ 62 url:"http://127.0.0.1:8000/send_ajax/", 63 success:function (data) { 64 alert(data) 65 }, 66 // 跨域请求 <script> 告诉服务器我要什么类型的数据contenttype是告诉服务器我是什么类型数据 67 dataType:"jsonp", 68 jsonp: ‘callbacks‘, //?callbacks=SayHi 相当于这个，问题就是在于前后端的函数名要相同 69 jsonpCallback:"SayHi" 70 }) 71 72 73 }); 74 75 function SayHi(arg) { 76 console.log("hello",arg) 77 } 78 </script> 79 80 {#// ==========================================基于jquery的JSONP的实现3 （推荐）#} 81 82 <script> 83 84 $(".send_ajax").click(function () { 85 86 $.ajax({ 87 url:"http://127.0.0.1:8000/send_ajax/", 88 dataType:"jsonp", // 跨域请求 <script> 89 // callbacks=? ？就是随机字符串了，后端传回来运行的就是success函数，也就是funciton 函数参数是数据 90 jsonp: ‘callbacks‘, 91 success:function (data) { 92 console.log(data) 93 } 94 }) 95 96 }); 97 98 99 </script> 100 101 {#// =========================================应用#} 102 103 104 <script> 105 106 $(".send_ajax").click(function () { 107 108 $.ajax({ 109 url:"http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403", 110 dataType:"jsonp", 111 jsonp:"callback", 112 jsonpCallback:"list" 113 }) 114 115 116 }); 117 118 function list(shuju) { 119 console.log(shuju.data); // {data: Array(7)} 120 var data=shuju.data; // [{},{},{},......] 121 122 $.each(data,function (i,weekend) { 123 //console.log(weekend); // {week: "周日", list: Array(19)} 124 console.log(weekend.list); // {week: "周日", list: Array(19)} 125 var week= weekend.week; 126 $("body").append("<div>"+week+"</div>"); 127 128 $.each(weekend.list,function (i,show) { 129 console.log(show); // {time: "1800", name: "《都市现场》90分钟直播版块", link: "http://www.jxntv.cn/live/jxtv2.shtml"} 130 131 var $a=$("<a>"); // <a></a> 132 $a.html(show.name); 133 $a.attr("href",show.link); 134 135 $("body").append(‘<p>‘); 136 $("body").append($a); 137 $("body").append(‘</p>‘); 138 139 }) 140 141 142 }) 143 144 } 145 </script> 146 </body> 147 </html>
注意 JSONP一定是GET请求