跨域

跨域名访问，如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. java 字符串解析为json 使用org.json包的JSONObject+JSONArray

    参考: https://blog.csdn.net/xingfei_work/article/details/76572550 java中四种json解析方式 JSONObject+JSONArray ...

  2. PyMongo和MongoEngine

    参见 http://stackoverflow.com/questions/5712857/pymongo-vs-mongoengine-for-django https://api.mongodb. ...

  3. Django - 文件上传、Django组件 - 分页器（paginator）

    一.文件上传准备知识 - Content-Type 1.请求头 - Content-Type Content-Type指的是请求体的编码类型,常见的类型共有3种: 1)application/x-ww ...

  4. JS的深拷贝

    var obj = { name: "wuyongyu", age: 18 } 第一种方式: function deepClone(obj){ // 判断传入的数据类型 - 数组或 ...

  5. 爬虫任务二：爬取(用到htmlunit和jsoup)通过百度搜索引擎关键字搜取到的新闻标题和url，并保存在本地文件中（主体借鉴了网上的资料）

    采用maven工程,免着到处找依赖jar包 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&quo ...

  6. 主机名 域名 网站名 URL

    举几个域名的例子:google.com,baidu.com,163.com可以明确的告诉你,加上www,就不再是域名了! 以http://mail.163.com/index.html为例进行说明:1 ...

  7. 和为定值的m个数

    和为定值的m个数 np 问题(时间复杂度o(2**n)) code1: 暴力递归 解决 只有正数的情况 class Solution { private List<List<Integer ...

  8. Python 字符串连接问题归结

    一.概述 Python 字符串连接场景较为普遍.由于编者对 Java 等语言较为熟悉,常常将两者语法混淆. 加之,Python 语法较为灵活.例如,单单实现字符串连接,就有数种方法.在此,一并归结! ...

  9. Kattis - cokolada【水】

    Kattis - cokolada[水] 题意 有一个人想吃巧克力,但是巧克力都是按照 2 的幂次的数量包装的,然后他想吃一定数量块的巧克力,然后可以敲碎,每次敲碎都分成两半,比如四块装的分成两块就是 ...

  10. Codeforces Round #385 (Div. 1) C. Hongcow Buys a Deck of Cards

    地址:http://codeforces.com/problemset/problem/744/C 题目: C. Hongcow Buys a Deck of Cards time limit per ...