同源策略

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

示例：两个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. 简单了解python使用正则表达式

    正则[Regular Expression]:正则表达式通常被用来检索.替换那些符合某个模式(规则)的文本. 正则是用来干啥的:正则就是用来匹配字符串的. Python中string的几个方法: fi ...

  2. 【THUSC2017】【LOJ2977】巧克力 斯坦纳树

    题目大意 有一个网格(或者你可以认为这是一个图),每个点都有颜色 \(c_i\) 和点权 \(a_i\). 求最小的连通块,满足这个连通块内点的颜色数量 \(\geq k\).在满足点数最少的前提下, ...

  3. MT【327】两道不等式题

    当$x,y\ge0,x+y=2$时求下面式子的最小值:1)$x+\sqrt{x^2-2x+y^2+1}$2)$\dfrac{1}{5}x+\sqrt{x^2-2x+y^2+1}$ 解:1)$P(x,y ...

  4. OpenFlow Flow-Mod消息学习

    任务内容 1. 熟悉Flow-Mod消息触发场景. 2. 掌握Flow-Mod消息格式和常用字段含义. 实验原理 OpenFlow 协议支持3种消息类型:Controller-to-Switch(控制 ...

  5. Re.多项式除法/取模

    前言 emmm又是暂无 前置 多项式求逆 多项式除法/取模目的 还是跟之前一样顾名思义] 给定一个多项式F(x),请求出多项式Q(x)和R(x),满足F(x)=Q(x)∗G(x)+R(x),R项数小于 ...

  6. Linux-#!/bin/sh理解

    #!是一个特殊符号,/bin/sh是用来解释该脚本的的shell路径 #!/bin/sh指该脚本使用/bin/sh来执行 sh只是其中一种解释方式,通过如下命令可以查到支持的shell解释方式: xx ...

  7. 使用BeautifulSoup

    下载bs4,导入BeautifulSoup pip install bs4 from bs4 import BeautifulSoup BeautifulSoup 的使用 创建对象 r = reque ...

  8. quartz基本介绍和使用

    一.什么是quartz,有什么用. Quartz是一个完全由java编写的开源作业调度框架,由OpenSymphony组织开源出来.所谓作业调度其实就是按照程序的设定,某一时刻或者时间间隔去执行某个代 ...

  9. 责任链模式-Chain of Responsibility(Java实现), 例1

    责任链模式-Chain of Responsibility, 例1 在这种模式中,通常每个接收者都包含对另一个接收者的引用.如果一个对象不能处理该请求,那么它会把相同的请求传给下一个接收者,依此类推. ...

  10. 第十二节：WebApi自动生成在线Api文档的两种方式

    一. WebApi自带生成api文档 1. 说明 通过观察,发现WebApi项目中Area文件夹下有一个HelpPage文件夹,如下图,该文件夹就是WebApi自带的生成Api的方式,如果该文件夹没了 ...