同源策略

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

示例：两个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. 结巴分词出现AttributeError: 'float' object has no attribute 'decode'错误

    将data转变为str格式 inputfile = 'comment2.csv'outputfile = 'comment2_cut.txt'datas = pd.read_csv(inputfile ...

  2. 【BZOJ4030】[HEOI2015]小L的白日梦

    [BZOJ4030][HEOI2015]小L的白日梦 题面 BZOJ 洛谷 题解 要求的是最小的不开心连续段的期望. 然后发现自己就不会做了. 然后就可以来抄题解啦. 首先来猜性质: 第一个,一定是按 ...

  3. 【dp】友好城市

    题目一: [题目描述] Palmia国有一条横贯东西的大河,河有笔直的南北两岸,岸上各有位置各不相同的N个城市.北岸的每个城市有且仅有一个友好城市在南岸,而且不同城市的友好城市不相同. 每对友好城市都 ...

  4. Spring Bean初始化之后执行指定方法

    转: Spring Bean初始化之后执行指定方法 2017年07月31日 15:59:33 vircens 阅读数:24807   Spring Bean初始化之后执行指定方法 在运用Spring进 ...

  5. Matlab安装完成后，出现错误licensing error：-8523的解决方法

    Matlab2018安装成功后,打开出现licensing error:-8523解决方法 https://blog.csdn.net/qq_41634276/article/details/8000 ...

  6. uboot中的中断macro宏

    目录 uboot中的中断macro宏 引入 内存分配 流程概览 普通中断 保存现场 中断函数打印具体寄存器 恢复现场 软中断 空间获取 保存现场 附录速记 疑惑待解 title: uboot中的中断m ...

  7. 并发编程之wait()、notify()

    前面的并发编程之volatile中我们用程序模拟了一个场景:在main方法中开启两个线程,其中一个线程t1往list里循环添加元素,另一个线程t2监听list中的size,当size等于5时,t2线程 ...

  8. IPv6 RIPng (PT)

    在Cisco路由器上配置RIPng  一.拓扑图 二.地址表 Device Interface IPv6 Address R1 F 0/0 2001:0DB8:CAFE:0001::1/64 S 0/ ...

  9. AngularJs的基本使用（一）

    AngularJS 指令 AngularJS 通过 ng-directives 扩展了 HTML,AngularJS 指令是以 ng 作为前缀的 HTML 属性. ng-app 指令定义一个 Angu ...

  10. UOJ #450「集训队作业2018」复读机

    UOJ #450 题意 有$ k$台复读机,每时每刻有且只有一台复读机进行复读 求$ n$时刻后每台复读机的复读次数都是$ d$的倍数的方案数 $ 1\leq d \leq 3,k \leq 5·10 ...