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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨域请求</title>
</head>
<body> <h1>跨域请求</h1>
<input type="submit" value="XmlSendRequest" onclick="XmlSendRequest();"/> <input type="submit" value="JqSendRequest_1" onclick="JqSendRequest_1();"/> <input type="submit" value="JqSendRequest_2" onclick="JqSendRequest_2();"/> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
// 客户端定义回调函数
function call(arg) {
console.log('客户端定义回调函数执行：', arg);
} function XmlSendRequest() {
// 创建script标签
var tag = 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);
} function JqSendRequest_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);
}
}) } function JqSendRequest_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
}) }
</script>
</body>
</html>
测试结果如：
b.JSONP(JSONP - JSON with Padding是JSON的一种“使用模式”)
本质：利用script标签的src属性(浏览器允许script标签跨域)
（img src, iframe, script 都可以进行跨域）
执行流程：（注意：所有都是GET请求）
服务端：
- 直接返回 回调函数名
客户端：
- 客户端定义回调函数
- 直接发送请求
jsonp.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨域请求</title>
</head>
<body> <h1>跨域请求</h1>
<input type="submit" value="XmlSendRequest" onclick="XmlSendRequest();"/> <input type="submit" value="JqSendRequest_1" onclick="JqSendRequest_1();"/> <input type="submit" value="JqSendRequest_2" onclick="JqSendRequest_2();"/> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
// 客户端定义回调函数
function call(arg) {
console.log('客户端定义回调函数执行：', arg);
} function XmlSendRequest() {
// 创建script标签
var tag = 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);
} function JqSendRequest_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);
}
}) } function JqSendRequest_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
}) }
</script>
</body>
</html>
测试结果：
***微信扫一扫，关注“python测试开发圈”，了解更多测试教程！***
Ajax-07 基于Ajax实现跨域请求的更多相关文章
- AJAX（XMLHttpRequest）进行跨域请求方法详解
AJAX(XMLHttpRequest)进行跨域请求方法详解(三) 2010年01月11日 08:48:00 阅读数:24213 注意:以下代码请在Firefox 3.5.Chrome 3.0.Saf ...
- 4 伪ajax：jsonp、cors 跨域请求
一.同源策略 https://www.cnblogs.com/yuanchenqi/articles/7638956.html 同源策略(Same origin policy)是一种约定,它是浏览器最 ...
- AJAX（XMLHttpRequest）进行跨域请求方法详解（三）
注意:以下代码请在Firefox 3.5.Chrome 3.0.Safari 4之后的版本中进行测试.IE8的实现方法与其他浏览不同. 3,带验证信息的请求 身份验证是Web开发中经常遇到的问题,在跨 ...
- AJAX（XMLHttpRequest）进行跨域请求方法详解（二）
注意:以下代码请在Firefox 3.5.Chrome 3.0.Safari 4之后的版本中进行测试.IE8的实现方法与其他浏览不同. 2,预检请求 预检请求首先需要向另外一个域名的资源发送一个 HT ...
- AJAX（XMLHttpRequest）进行跨域请求方法详解（一）
注意:以下代码请在Firefox 3.5.Chrome 3.0.Safari 4之后的版本中进行测试.IE8的实现方法与其他浏览不同. 跨域请求,顾名思义,就是一个站点中的资源去访问另外一个不同域名站 ...
- jquery ajax在IE9以下进行跨域请求时无效的问题
第一步:设置浏览器安全属性,启用[通过域访问数据源]选项: 1.选择Internet选项 2.选择安全---自定义级别 3.找到其他---通过域访问数据源,选择启用,然后确定就可以了. 第二步:调用a ...
- jQuery ajax的jsonp跨域请求
一直在听“跨域跨域”,但是什么是跨域呢?今天做了一些了解.(利用jQuery的jsonp) jQuery使用JSONP跨域 JSONP跨域是利用script脚本允许引用不同域下的js实现的,将回调方法 ...
- CORS——跨域请求那些事儿
在日常的项目开发时会不可避免的需要进行跨域操作,而在实际进行跨域请求时,经常会遇到类似 No 'Access-Control-Allow-Origin' header is present on th ...
- Python-S9—Day85-ORM项目实战之forms组件以及Modelform补充、跨域请求及应用
01 forms组件补充1 02 forms组件补充2 03 ModelForm回顾 04 浏览器的历史 05 jsonop实现跨域请求 06 jsonop实现跨域请求2 07 jsonop实现跨域请 ...
随机推荐
- img标签使用onload进行src更改时出现的内存溢出问题
最近在开发时需要在img标签加载完成后修改src属性,使用了onload方法. 但是在方法体中最后没有把onload事件指向null, 导致了循环调用onload方法,CPU占用一直居高不下,最后只要 ...
- IIS 部署WCF时遇到这么个错:
转(http://blog.csdn.net/vic0228/article/details/48806405) 部署WCF时遇到这么个错: "The service cannot be a ...
- Qt隐式共享与显式共享
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/Amnes1a/article/details/69945878Qt中的很多C++类都使用了隐式数据共 ...
- 转！！Java虚拟机堆的内存分配和回收
Java内存分配和回收,主要就是指java堆的内存分配和回收.java堆一般分为2个大的区域,一块是新生代,一块是老年代.在新生代中又划分了3块区域,一块eden区域,两块surviver区域.一般称 ...
- Vue（2）- v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- 修改sql server实例、数据库、表、字段的排序规则
转自:http://blog.51cto.com/jimshu/1095780 概念与详情请参考:字符编码与排序规则:https://www.cnblogs.com/gered/p/9145123.h ...
- java 多线程 day06 threadLocal
import java.util.HashMap;import java.util.Map;import java.util.Random; /** * Created by chengtao on ...
- html当前文档的状态
<script type="text/javascript"> document.onreadystatechange = loadingChange;//当页面加载状 ...
- Djngo Rest Framework
目录: 认证和授权 用户访问次数/频率 版本 解析器 序列化 分页 路由系统 视图 渲染器 一. 什么是Restful REST与技术无关,代表的是一种软件架构风格,REST是Representati ...
- 从零到一创建ionic移动app：创建第一个app
新建一个空项目,让它能够在你的虚拟机/手机上跑起来 第一步 新建工程 ionic start myApp blank 一个简单的Web应用我们已经创建完成了,接下来我们就要做一些部署到移动端之前的 ...