同源策略

如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源。

示例：两个Django demo

demo1

url.py

url(r'^demo1/',demo1),

view.py

def demo1(request):

    return HttpResponse("demo1")

demo2

url.py

url(r'demo2$',demo2),

view.py

def demo2(request):

    return render(request,'demo.html')

demo.html

<body>

<button id="btn">点击</button>

<script>

    $("#btn").click(function () {

        $.ajax({

            url:"http://127.0.0.1:8002/demo1/",

            type:"get",

        }).done(function (data) {

            console.log(data)

        })

    });

</script>

</body>

启动浏览器，访问http://127.0.0.1:8001/demo2，点击按钮，然后控制台报错

为什么报错？因为同源策略限制跨域发送ajax请求。

我们用script标签引入cdn没有报错，so，用script解决问题试试。

修改demo.html

<body>

<button id="btn">点击</button>

<script src="http://127.0.0.1:8002/demo1"></script>

</body>

刷新浏览器

说demo1未定义，那定义一个demo1；修改demo.html

<body>

<button id="btn">点击</button>

<script>

var demo1 = "demo1"

</script>

<script src="http://127.0.0.1:8002/demo1/"></script>

</script>

</body>

然后不报错了。

那在定义一个demo1函数，看看效果；修改demo.html

<body>

<button id="btn">点击</button>

<script>

    function demo1(){

        console.log("demo1")

    }

</script>

<script src="http://127.0.0.1:8002/demo1/"></script>

</body>

修改demo1的view.py

def demo1(request):

    return HttpResponse("demo1()")

nice，已经能执行函数了。那给函数加参数看看效果。

修改demo.html

<body>

<button id="btn">点击</button>

<script>

    function demo1(ret){

        console.log(ret)

    }

</script>

<script src="http://127.0.0.1:8002/demo1/"></script>

</body>

修改demo1的view.py

import json

def demo1(request):

    ret = {"status": 1, "msg": "demo1"}

    return HttpResponse("demo1({})".format(json.dumps(ret)))

刷新浏览器看效果。

这其实就是JSONP的简单实现模式，或者说是JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。

将JSON数据填充进回调函数，这就是JSONP的JSON+Padding的含义。

通过js动态的创建script标签来实现数据的获取。

修改demo.html

<body>

<button id="btn">点击</button>

<script>

    function demo1(ret){

        console.log(ret)

    }

    function addScriptTag(src) {

        var sTag = document.createElement("script");

        $(sTag).attr("src", src);

        $("body").append(sTag);

        $(sTag).remove();

    }

</script>

<script>

    $("#btn").click(function () {

        addScriptTag("http://127.0.0.1:8002/demo1/")

    })

</script>

</body>

此时通过按钮就可以动态的在页面上插入一个script标签，然后从后端获取数据。

为了实现更加灵活的调用，我们可以把客户端定义的回调函数的函数名传给服务端，服务端则会返回以该回调函数名，将获取的json数据传入这个函数完成回调。

修改demo.html

<body>

<button id="btn">点击</button>

<script>

    function demo1(ret){

        console.log(ret)

    }

    function addScriptTag(src) {

        var sTag = document.createElement("script");

        $(sTag).attr("src", src);

        $("body").append(sTag);

        $(sTag).remove();

    }

</script>

<script>

    $("#btn").click(function () {

        addScriptTag("http://127.0.0.1:8002/demo1/?callback=demo1")

    })

</script>

</body>

修改demo1中的views.py

import json

def demo1(request):

    ret = {"status": 1, "msg": "demo1"}

    func_name = request.GET.get("callback")

    return HttpResponse("{}({})".format(func_name, json.dumps(ret)))

此时实现动态的调用了。

然而jQuery中有专门的方法实现jsonp。

修改demo.html

<body>

<button id="btn">点击</button>

<script>

    $("#btn").click(function () {

        $.getJSON("http://127.0.0.1:8002/demo1/?callback=?",function (data) {

            console.log(data)

        })

    })

</script>

注意的是在url的后面必须要有一个callback参数，这样getJSON方法才会知道是用JSONP方式去访问服务，callback后面的那个？是jQuery内部自动生成的一个回调函数名。

但是如果我们想自己指定回调函数名，或者说服务上规定了回调函数名该怎么办呢？我们可以使用$.ajax方法来实现：

修改demo.html

<body>

<button id="btn">点击</button>

<script>

    $("#btn").click(function () {

        $.ajax({

            url:"http://127.0.0.1:8002/demo1/",

            dataType:"jsonp",

            jsonp:"callback",

            jsonpCallback:"demo1"

        }).done(function (data) {

            console.log(data)

        })

    });

</script>

</body>

Django—跨域请求（jsonp）的更多相关文章

  1. Django跨域请求之JSONP和CORS

    现在来新建一个Django项目server01,url配置为 url(r'^getData.html$',views.get_data) 其对应的视图函数为get_data: from django. ...

  2. 浏览器同源策略，跨域请求jsonp

    浏览器的同源策略 浏览器安全的基石是"同源政策"(same-origin policy) 含义: 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这 ...

  3. 循序渐进Python3（十一） --6--  Ajax 实现跨域请求 jsonp 和 cors

    Ajax操作如何实现跨域请求?       Ajax (XMLHttpRequest)请求受到同源策略的限制.       Ajax通过XMLHttpRequest能够与远程的服务器进行信息交互,另外 ...

  4. AJAX 跨域请求 - JSONP获取JSON数据

    Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...

  5. jquery跨域请求jsonp

    服务端PHP代码  header('Content-Type:application/json; charset=utf-8'); $arr = array('a'=>1, 'b'=>2, ...

  6. 跨域请求 & jsonp

    0 什么是跨域请求 在一个域名下请求另外一个域名下的资源,就是跨域请求.example 1:比如:我当前的域名是http://che.pingan.com.我现在要去请求http://www.cnbl ...

  7. 【JS跨域请求】Ajax跨域请求JSONP

    前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资料,原来如此... 为何一直知道jsonp,但一直迷迷糊糊的不明白 ...

  8. 关于laravel框架的跨域请求/jsonp请求的理解

    最近刚接触laravel框架,首先要写一个跨域的单点登录.被跨域的问题卡了两三天,主要是因为对跨域这快不了解,就在刚才有点茅塞顿开的感觉,我做一下大概整理,主要给一些刚接触摸不着头脑的看,哪里写得不对 ...

  9. JS跨域请求 JSONP B/S全代码

    Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面.动态网页.web服务.WCF,只要是跨域请求,一律不准:Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有 ...

  10. 【转】AJAX 跨域请求 - JSONP获取JSON数据

    来源:http://justcoding.iteye.com/blog/1366102/ Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流 ...

随机推荐

  1. Helicute FPV App Privacy Policy

    Personal Data collected for the following purposes and using the following services: Device permissi ...

  2. 特殊计数序列——第二类斯特林（stirling）数

    计算式 \[ S(n,m)=S(n-1,m-1)+mS(n,m) \] \(S(0,0)=1,S(i,0)=0(i>0)\) 组合意义 将\(n\)个不可分辨的小球放入\(m\)个不可分辨的盒子 ...

  3. 【THUSC2017】【LOJ2979】换桌 线段树 网络流

    题目大意 有 \(n\) 个圆形的桌子排成一排,每个桌子有 \(m\) 个座位. 最开始每个位置上都有一个人.现在每个人都要重新选择一个座位,第 \(i\) 桌的第 \(j\) 个人的新座位只能在第 ...

  4. kubernetes学习第一篇-k8s安装以及HelloWorld

    安装 1. 关闭防火墙服务 # systemctl disable firewalld # systemctl stop firewalld 2. 安装etcd以及kubernetes软件 yum i ...

  5. 史上最全PMP备考考点全攻略（上篇-五大过程组，附赠资料）

    一.这可能是一篇史上最全的PMP备考考点全梳理文章 写在前面,这可能是史上最全的PMBOK考点全书考点梳理,由PMP备考自律营呕心沥血整理,内容较长,分为上下篇,绝对值得所有正在备考PMP的学员收藏! ...

  6. Exp5 MSF基础应用

    一.实践内容 1.主动攻击实践 [1]MS08-067 MS08-067 漏洞是2008 年年底爆出的一个特大漏洞,存在于当时的所有微软系统,杀伤力超强.其原理是攻击者利用受害主机默认开放的SMB 服 ...

  7. 安装windows server 2008r2服务器操作系统

    R4900 G2 UEFI使用RAID-1000配置阵列 http://123.57.42.60/12755.html 首先进入到进到UEFI中阵列配置界面, 1Legacy BIOS Mode进入阵 ...

  8. Typora 使用说明

    目录 Typora是一款超简洁的markdown编辑器,具有如下特点: 完全免费,目前已支持中文 跨平台,支持windows,mac,linux 支持数学公式输入,图片插入 极其简洁,无多余功能 界面 ...

  9. 网络&协议目录

    HTTP [基础] HTTP入门学习 网络基础 数据传输 网站架构演化 连接管理 缓存 [组成] URL 报文起始行 报文首部 [结构] Web服务器 代理 网关.隧道和中继 [安全] Web攻击技术 ...

  10. 2、搭建一个简单的Web项目

    一.创建一个Web项目: 1.File->new Project->Java->JavaEE->Web Application 2.为项目起名: 3.配置项目:在项目上击右键- ...