跨域

跨域名访问，如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实现跨域请求的更多相关文章

  1. AJAX（XMLHttpRequest）进行跨域请求方法详解

    AJAX(XMLHttpRequest)进行跨域请求方法详解(三) 2010年01月11日 08:48:00 阅读数:24213 注意:以下代码请在Firefox 3.5.Chrome 3.0.Saf ...

  2. 4 伪ajax：jsonp、cors 跨域请求

    一.同源策略 https://www.cnblogs.com/yuanchenqi/articles/7638956.html 同源策略(Same origin policy)是一种约定,它是浏览器最 ...

  3. AJAX（XMLHttpRequest）进行跨域请求方法详解（三）

    注意:以下代码请在Firefox 3.5.Chrome 3.0.Safari 4之后的版本中进行测试.IE8的实现方法与其他浏览不同. 3,带验证信息的请求 身份验证是Web开发中经常遇到的问题,在跨 ...

  4. AJAX（XMLHttpRequest）进行跨域请求方法详解（二）

    注意:以下代码请在Firefox 3.5.Chrome 3.0.Safari 4之后的版本中进行测试.IE8的实现方法与其他浏览不同. 2,预检请求 预检请求首先需要向另外一个域名的资源发送一个 HT ...

  5. AJAX（XMLHttpRequest）进行跨域请求方法详解（一）

    注意:以下代码请在Firefox 3.5.Chrome 3.0.Safari 4之后的版本中进行测试.IE8的实现方法与其他浏览不同. 跨域请求,顾名思义,就是一个站点中的资源去访问另外一个不同域名站 ...

  6. jquery ajax在IE9以下进行跨域请求时无效的问题

    第一步:设置浏览器安全属性,启用[通过域访问数据源]选项: 1.选择Internet选项 2.选择安全---自定义级别 3.找到其他---通过域访问数据源,选择启用,然后确定就可以了. 第二步:调用a ...

  7. jQuery ajax的jsonp跨域请求

    一直在听“跨域跨域”,但是什么是跨域呢?今天做了一些了解.(利用jQuery的jsonp) jQuery使用JSONP跨域 JSONP跨域是利用script脚本允许引用不同域下的js实现的,将回调方法 ...

  8. CORS——跨域请求那些事儿

    在日常的项目开发时会不可避免的需要进行跨域操作,而在实际进行跨域请求时,经常会遇到类似 No 'Access-Control-Allow-Origin' header is present on th ...

  9. Python-S9—Day85-ORM项目实战之forms组件以及Modelform补充、跨域请求及应用

    01 forms组件补充1 02 forms组件补充2 03 ModelForm回顾 04 浏览器的历史 05 jsonop实现跨域请求 06 jsonop实现跨域请求2 07 jsonop实现跨域请 ...

随机推荐

  1. responsive and functional programming RxJava

    RxJava由于使用了多个回调,一开始理解起来可能有点难度,其实多看几遍也就明白了,它的招式套路都是一样的: 首先就是创建Observable,创建Observable有很多种方式,这里使用了Obse ...

  2. NYOJ 119 士兵杀敌（三）(RMQ算法）

    採用的的是小牛的写法,蒟蒻第一次写.. RMQ (Range Minimum/Maximum Query)问题是指:对于长度为n的数列A,回答若干询问RMQ(A,i,j)(i,j<=n).返回数 ...

  3. 利用VMware克隆linux虚拟机需要注意的事项

    利用VMware克隆虚拟机需要注意的问题 2018年03月30日 18:20:29 温文尔雅的流氓 阅读数:1343更多 个人分类: linux   版权声明:本文为博主原创文章,未经博主允许不得转载 ...

  4. C#超级方便的ExpandoObject类别

    这东西是.NET Framework 4.5 的新东西..发现这个,大概就跟发现新大陆一样的兴奋,让我再次赞叹Anders Hejlsberg 之神.. 这边有MSDN : http://msdn.m ...

  5. [转]C#读写远程共享文件夹

    1.在服务器设置一个共享文件夹,在这里我的服务器ip地址是10.200.8.73,共享文件夹名字是share,访问权限,用户名是administrator,密码是11111111. 2.新建一个控制台 ...

  6. 【教程】Microsoft Visual Studio 2015 安装Android SDK

    http://blog.sina.com.cn/s/blog_51f9ffaa0102vuhy.html Hi,大家好,自vs2015发布后,有很多小伙伴尝试使用VS2015开发安卓,由于是新手,一折 ...

  7. 微信小程序组件scroll-view

    视图容器scroll-view :官方文档 Demo Code var order = ['red', 'yellow', 'blue', 'green', 'red'] Page({ data: { ...

  8. Java Web架构总结

    转载至:http://www.cnblogs.com/wuxl360/p/7489763.html 初始搭建 开始的开始,就是各种框架一搭,然后扔到Tomcat容器中跑就是了,这时候我们的文件,数据库 ...

  9. java注解1

    http://computerdragon.blog.51cto.com/6235984/1210969 http://blog.csdn.net/it_man/article/details/440 ...

  10. 关于Python字符编码encode和decode

    (注:本文部分内容摘自互联网,由于作者水平有限,不足之处,还望留言指正.) 记得几天前,部门的一个小姑娘问我,怎么她Python打印出来的中文信息都乱码了?我走过去,略思一二,瞬间给她搞定,其实这是字 ...