同源策略

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

示例：两个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. react-navigation使用之嵌套和跳转

    1. 新版react-native已经将react-navigation作为官方版本发布,基础Demo可以从官方网站获得,比较困扰的问题是组件的嵌套和第二.第三页面的跳转. 2. 组件嵌套问题: 要在 ...

  2. 前端动态菜单-bootstrap-treeview

    一.bootstrap-treeview 官网 Demo bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter ...

  3. C# 将前端传来的图片文件分别以大图和缩略图保存

    HttpPostedFile pic_upload = Request.Files["file"]; Bitmap bitmap = (Bitmap)System.Drawing. ...

  4. The Preliminary Contest for ICPC China Nanchang National Invitational I. Max answer (单调栈+线段树)

    题目链接:https://nanti.jisuanke.com/t/38228 题目大意:一个区间的值等于该区间的和乘以区间的最小值.给出一个含有n个数的序列(序列的值有正有负),找到该序列的区间最大 ...

  5. 如何在Linux中使用命令行卸载软件

    您可以使用“dpkg”命令来查看您的计算机,按“Ctrl + Alt + T”的所有已安装包的列表,打开一个终端窗口. 在提示符下键入以下命令,然后按Enter键.dpkg -- list 要卸载程序 ...

  6. python 黑魔法收集--已结

    awesome python 中文大全 Fabric , pip, virtualenv 内建函数好文 awesome python 奇技淫巧 一句话求阶乘 from functools import ...

  7. macOS Mojave配置OpenGL开发环境

    ---恢复内容开始--- 前言: 本文写作目的: 是由于本人参考 csdn原文 的方法配置环境时踩了很多坑,所以在此写一篇文防止以后用到. 工具: Xcode CMake 步骤: 准备工作: Xcod ...

  8. 运维笔记-----nginx反向代理

    在/opt/nginx 下的配置文件同级建立反向代理的配置文件manager.conf <span style="font-size:18px;">user nobod ...

  9. tomcat配置及环境搭建

    步骤一 下载tomcat 下载tomcat并安装,登陆tomcat官网,http://tomcat.apache.org/,Windows系统建议选择Windows Service Installer ...

  10. APPLE-SA-2019-3-27-1 watchOS 5.2

    APPLE-SA-2019-3-27-1 watchOS 5.2 watchOS 5.2 is now available and addresses the following: CFStringA ...