Ajax跨域
同源策略同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。 项目一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"))
点击项目二中的按钮会报如下错误信息： Jsonpjsonp是json用来跨域的一个东西。原理是通过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不行吗，这咋就又行了？ <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请求！！！ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |