跨域

跨域名访问，如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. 剑指Offer——用两个栈实现队列

    题目描述: 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 分析: 代码: class Solution { public: void push(int node ...

  3. jenkins 升级

    升级Jenkins Jenkins的开发迭代非常快,每周发布一个开发版本,长期支持版每半年更新一次(ps:大版本更新).如此频繁的更新,怎么升级呢? war:下载新版的war文件,替换旧版本war文件 ...

  4. USB 3.0：那些你需要知道的事

    在过去14年来,通用串行总线(USB)已成为计算机和外部设备之间的标准接口.不管是移动硬盘.相机.鼠标.键盘.打印机,还是扫描仪,它们和计算机之间的数据传输一般均采用USB线.USB接口也的确是“通用 ...

  5. mac本配置python环境

    mac本上一般是自带python解释器的. 我选择了SublimeText2作为编辑器.安装个SublimeCodeIntel插件,可以进行代码自动补全. 新建一个python文件:hello.py ...

  6. html5.js让IE（包含IE6）支持HTML5元素方法

    原文地址:http://blog.sina.com.cn/s/blog_62a36ec401018oqb.html html5.js让IE(包含IE6)支持HTML5元素方法 微软的最新浏览器IE8及 ...

  7. 10046 trace详解(1)

    10046 trace帮助我们解析一条/多条SQL.PL/SQL语句的运行状态,这些状态包括:Parse/Fetch/Execute三个阶段中遇到的等待事件.消耗的物理和逻辑读.CPU时间.执行计划等 ...

  8. SSH 公钥检查

    SSH 公钥检查是一个重要的安全机制,可以防范中间人劫持等黑客攻击.但是在特定情况下,严格的 SSH 公钥检查会破坏一些依赖 SSH 协议的自动化任务,就需要一种手段能够绕过 SSH 的公钥检查. 首 ...

  9. python之路 面向对象基础 XML

    一.面向对象基础 1.类(Class): 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法.对象是类的实例. 类变量:类变量在整个实例化的对象中是公用的.类变量定义 ...

  10. iPhone获取手机里面所有的APP（私有库）+ 通过包名打开应用

    1.获取到手机里面所有的APP包名 - (void)touss { Class lsawsc = objc_getClass("LSApplicationWorkspace"); ...