ajax实现跨域查询,Ajax-07 基于Ajax实现跨域请求

跨域

跨域名访问，如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

})

}