admin管理员组

文章数量:1122852

ajax的跨域请求实现,Ajax

跨域

跨域名访问，如c1域名向c2域名发送请求

本质：浏览器存在同源策略机制，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。

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

})

}

本文标签： ajax的跨域请求实现Ajax