跨域

跨域名访问，如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. PHP的语言结构和函数的区别

    相信大家经常看到对比一些PHP应用中,说用isset() 替换 strlen(),isset比strlen执行速度快等. 例子: if ( isset($user) ) { //do some thi ...

  2. java基础08 双重循环打印图形

    public class Double01 { /** * 若有3个班级各4名学员参赛, * 如何计算每个班级参赛学员的平均分? */ public static void main(String[] ...

  3. 线程池ThreadPoolExecutor参数设置

    线程池ThreadPoolExecutor参数设置 JDK1.5中引入了强大的concurrent包,其中最常用的莫过了线程池的实现ThreadPoolExecutor,它给我们带来了极大的方便,但同 ...

  4. NPOI 操作office、word、excel

    下载地址为:http://npoi.codeplex.com/releases/view/616131 可以操作excel表,行,单元格内家及样式等.   使用示例:             usin ...

  5. SQL Server 加前导0

    declare @a int declare @b int set @a = 1 --需要显示的数字 set @b = 3 --显示位数 select right(cast(power(10,@b) ...

  6. Python面向对象高级编程-_slots_

    使用_slots_ 正常情况下,当定义一个class,创建一个class的实例后,可以给实例绑定任何属性和方法,这就是动态语言的灵活性.先定义class: >>> class Stu ...

  7. 微信读书App来了 小伙伴们快去占榜吧

    微信读书App正式上线了,iOS版和Android版同时推出.届时将会出现像微信运动一样的霸榜小伙伴.资料显示,阅文集团成立于2014年1月,是腾讯文学和盛大文学联合成立的新公司.阅文集团成立后,会对 ...

  8. Java NIO2 File API介绍

    Introduction to the Java NIO2 File API GitHub NIO2中的文件API是Java 7附带的Java平台的主要新功能之一,特别是新的文件系统API的一个子集以 ...

  9. Java泛型四：Java泛型总结

    原文地址https://www.cnblogs.com/lwbqqyumidi/p/3837629.html 一. 泛型概念的提出(为什么需要泛型)? 首先,我们看下下面这段简短的代码: 1 publ ...

  10. NGUI 3.50 UIButton使用

    在NGUI,3.X的版本中,取消了创建UIbutton这个选项,所以我们可以创建uisprite.uilabel等,然后在上面附加uibutton脚本,达到目的,具体步骤 1:在界面上键好2D或3D ...