同源策略

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

示例：两个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. CentOS安装python3.6

    下载Python安装包 cd /usr/local/src 编译时要提前装好gcc编译器和zlib zlib-devel 1.下载文件 wget https://www.python.org/ftp/ ...

  2. bzoj 3282: Tree (Link Cut Tree）

    链接:https://www.lydsy.com/JudgeOnline/problem.php?id=3282 题面: 3282: Tree Time Limit: 30 Sec  Memory L ...

  3. Equipment UVA - 1508（子集补集）

    The Korea Defense and Science Institute, shortly KDSI, has been putting constant effort into newequi ...

  4. Rest Framework

    目录导航 一.RESTful 规范 二.APIView 组件 三.序列化组件 四.认证组件 五.权限组件 六.频率组件 七.分页器组件 一.RESTful 规范 什么是RESTful规范: REST与 ...

  5. nexus5 root

    LG nexus5 安装新的lineage 14.1系统卡刷 supersuV2.82失败,开机卡动画界面. 改回刷入2016年11月下的cm 13 的包,三清后卡刷supersuV2.82,成功.

  6. （十一）QPainter绘图， QPixmap，QImage，QPicture，QBitmap

    #include "widget.h" #include "ui_widget.h" #include <QPainter> #include &l ...

  7. element-UI的Dialog弹出框蒙版被遮住

    类似于这种,相信会有很多人遇到这种问题的,其实解决的方法很简单 <el-dialog title="修改分类" :visible.sync="modifyFormV ...

  8. Gym - 101982C Contest Setting （动态规划）

    A group of contest writers have written n problems and want to use k of them in an upcoming contest. ...

  9. Maven（二）名词、命令、仓库、依赖、私服

    这篇文章将Maven其他内容做一个介绍. 一.名词 ①:localRepository 本地仓库路径,位于maven/conf/settings.xml中. ②:project  项目. ③:pom  ...

  10. CH4INRULZ从渗透到提权

    下载了镜像后查看了ip http://192.168.16.128/ 然后用nmap扫描了一波 sudo nmap -vv -sV 192.168.16.128 访问80端口发现是个个人博客 访问80 ...