跨域
跨域名访问，如c1.com域名向c2.com域名发送请求
本质：浏览器存在同源策略机制，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。
django服务端准备
url.py:
from django.conf.urls import url
from hello import views
urlpatterns = [
url(r'cors/', views.cors, name='cors'),
url(r'jsonp/', views.jsonp, name='jsonp'),
]
views.py:
#!/usr/bin/env python
# -*- coding: utf-8 -*-
from django.http import HttpResponse
from django.shortcuts import render
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def cors(request):
n1 = request.POST.get('n1')
n2 = request.POST.get('n2')
result = int(n1) + int(n2)
response = HttpResponse(result)
response['Access-Control-Allow-Origin'] = "*"
return response
@csrf_exempt
def jsonp(request):
func_name = request.GET.get('callback')
n1 = request.GET.get('n1')
n2 = request.GET.get('n2')
result = int(n1) + int(n2)
temp = "%s(%s)" % (func_name, result)
response = HttpResponse(temp)
return response
实现Ajax跨域请求
a.跨域资源共享(CORS,Cross-Origin Resource Sharing)
执行流程：
服务端
- 设置响应头
客户端
- XmlHttpRequest 直接发送请求
cors.html:
跨域请求跨域请求
//客户端定义回调函数
functioncall(arg) {
console.log('客户端定义回调函数执行：', arg);
}functionXmlSendRequest() {//创建script标签
vartag=document.createElement('script');//指定src
tag.src= "http://localhost:8000/jsonp/?callback=call&n1=2&n2=4";//添加到head标签中
document.head.appendChild(tag);//删除script标签
document.head.removeChild(tag);
}functionJqSendRequest_1() {
$.ajax({
url:"http://localhost:8000/jsonp/",
data: {'n1':22,'n2':44},
type:'POST',//虽然是POST方式，但是内部会转换成GET请求
dataType:'jsonp',
success:function(data, statusText, xmlHttpRequest) {
console.log('success 回调执行:', data);
}
})
}functionJqSendRequest_2() {
$.ajax({
url:"http://localhost:8000/jsonp/",
data: {'n1':222,'n2':444},
type:'GET',//POST 也会自动转换为GET请求
dataType:'jsonp',
jsonp:"callback",
jsonpCallback:'call',//请求成功返回后，客户端执行call函数
success:function(data, statusText, xmlHttpRequest) {//未指定jsonCallback时，则自定执行方法
console.log('success 回调执行:', data);
}//如上请求如 http://localhost:8000/jsonp/?callback=call&n1=222&n2=444
})
}