-
-
-
同源策略
- 项目一
- 项目二
- Jsonp
- jQuery对JSONP的实现
- $.ajax
-
同源策略
-
同源策略
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
同源策略，它是由netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。
项目一
url配置如下
url(r'^SendAjax/',views.SendAjax),url(r'^index/',views.index),
views如下：
def index(request):
return render(request,"index.html")
def SendAjax(request):
import json
print(request.POST,"+++++++++++")
return HttpResponse(json.dumps("hello"))
index.html如下：
<body> <button>ajax</button> {% csrf_token %} <script> $("button").click(function () { $.ajax({ url: "http://127.0.0.1:8001/SendAjax/",type: "POST",data: {"username": "safly","csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val()},success: function (data) { alert(data) } }) }) </script> </body>
我们请求自己的项目是正常的，不会报错
后台输出如下：
[02/Mar/2018 15:53:59] "POST /SendAjax/ HTTP/1.1" 200 7
<QueryDict: {'username': ['safly'],'csrfmiddlewaretoken': ['ked0EHNK3u0DGmrmGEhjM9pNMfLg0p5yiOyvf8StZ7cWZqyOYPUrNIAp3wbi3CQ6']}> +++++++++++
项目二
url配置
url(r'^SendAjax/',
页面如下：
<body> <p>我是pro2</p> <button>ajax</button> {% csrf_token %} <script> $("button").click(function () { $.ajax({ {#url: "http://127.0.0.1:8000/SendAjax/",#} url: "http://127.0.0.1:8001/SendAjax/",success: function (data) { alert(data) } }) }) </script> </body>
views视图如下：
from django.shortcuts import render,HttpResponse
# Create your views here.
def index(request):
return render(request,"index_.html")
def SendAjax(request):
import json
print(request.POST,"+++++++++++")
return HttpResponse(json.dumps("hello"))
点击项目二中的按钮会报如下错误信息：
但是注意，项目2中的访问已经发生了，说明是浏览器对非同源请求返回的结果做了拦截。
Jsonp
jsonp是json用来跨域的一个东西。原理是通过script标签的跨域特性来绕过同源策略。
借助script标签，实现跨域请求，示例
我们修改项目一的视图代码
def SendAjax(request):
import json
print(request.POST,"+++++++++++")
res = {"name": "safly"}
return HttpResponse("%s('%s')"%("func",json.dumps(res)))
然后修改添加项目二的页面代码
<script> function func(data) { console.info(data) } </script>
<script src="http://127.0.0.1:8001/SendAjax/"></script>
然后发送请求输出结果如下：
这其实就是JSONP的简单实现模式，或者说是JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。
将JSON数据填充进回调函数，这就是JSONP的JSON+Padding的含义。
一般情况下，我们希望这个script标签能够动态的调用，而不是像上面因为固定在html里面所以没等页面显示就执行了，很不灵活。我们可以通过javascript动态的创建script标签，这样我们就可以灵活调用远程服务了。
def SendAjax(request):
func = request.GET.get("callback")
print("func",func)
import json
res = {"name": "safly"}
return HttpResponse("%s('%s')"%(func,json.dumps(res)))
在项目2中添加如下代码：
$("button").click(function () {
cross_yu("http://127.0.0.1:8001/SendAjax/?callback=foo")
})
function foo(s) {
console.log(s);
JSON.parse(s)
}
function cross_yu(url) {
var $ele_script = $("<script>");
$ele_script.attr("src",url);
$ele_script.attr("class","kuayu");
// 添加到body中
$("body").append($ele_script); // 发送请求
$(".kuayu").remove()
}
浏览器控制台依然输出如下：
{"name": "safly"}
jQuery对JSONP的实现
jQuery框架也当然支持JSONP，可以使用$.getJSON(url,[data],[callback])方法
$("button").click(function () {
$.getJSON("http://127.0.0.1:8001/SendAjax/?callback=?",function (data) {
console.log(data);
})
});
浏览器控制台输出如下：
{"name": "safly"}
结果是一样的，要注意的是在url的后面必须添加一个callback参数，这样getJSON方法才会知道是用JSONP方式去访问服务，callback后面的那个问号是内部自动生成的一个回调函数名。
此外，如果说我们想指定自己的回调函数名，或者说服务上规定了固定回调函数名该怎么办呢？我们可以使用$.ajax方法来实现
$.ajax
看到这个有些人就疑惑，这个不就是Ajax吗，不是说ajax不行吗，这咋就又行了？
其实确实不行，只是Jquery的作者让它和ajax同名而已。
<script> $("button").click(function () { $.ajax({ url: 'http://127.0.0.1:8001/SendAjax/',dataType: "jsonp",{# 期待数据类型，一定要加，只要有这句话，就会去添加script标签 #} jsonp: 'callback',{# 其实就是补充在后面：http://127.0.0.1:8001/SendAjax/？callback=SayHi#} jsonpCallback: "SayHi" {# 如果这里不加jsonpCallback，就会是callback=？，这样就是getJson #} }); }); function SayHi(data) { console.log(data) } </script>
浏览器客户端依然输出一样的结果
{"name": "safly"}
当然，最简单的形式还是通过回调函数来处理：
<script> $("button").click(function () { $.ajax({ url:'http://127.0.0.1:8001/SendAjax/',dataType:"jsonp",jsonp: 'callback',success:function (data) { console.log(data) } }); }); </script>
浏览器控制台输出
{"name": "safly"}
jsonpCallback参数可以不定义，jquery会自动定义一个随机名发过去，那前端就得用回调函数来处理对应数据了。利用jQuery可以很方便的实现JSONP来进行跨域访问。
注意 JSONP一定是GET请求！！！