同源策略与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>
