一：什么是JSONP

　　JSONP(JSON with Padding)是JSON的一种"使用模式"，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

二:使用原生js,或者jquery访问跨域报错

    <body>

    <h1>后台获取结果</h1>

    {{ result }}

    <h1>js直接获取结果</h1>

    <input type="button" value="获取数据" id="ok_button" onclick="getData();">

    <div id=""container>

    </div>

    <script>

        //原生js

        function getData(){

            var xhr=new XMLHttpRequest()

            xhr.open("GET","http://127.0.0.1:8001/req")//以什么方式a

            xhr.onreadystatechange=function(){//执行成功后的回调信息

                console.log(xhr.responseText)

            }

            xhr.send() //发送信息

        }

    </script>

    </body>

    #js发错报错

    XMLHttpRequest cannot load http://127.0.0.1:8001/req. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8000' is therefore not allowed access.

    以把请求放过去了，也收到了，但在在数据回到浏览器的时候，我浏览器拒不接受。这是浏览器策略。

三：使用script发送数据

#jsonp 存在的意义就是：由于浏览器具有同源策略（阻止ajax请求，但是无法阻止script）。

    #通过script发送数据。

    <body>

        <h1>后台获取结果</h1>

        {{ result }}

        <h1>js直接获取结果</h1>

        <input type="button" value="获取数据" id="ok_button" onclick="getData();">

        <div id=""container>

        </div>

        <script>

            //原生js

            function getData(){

                var tag=document.createElement("script") //创建script标签

                tag.src="http://127.0.0.1:8001/req //要发送地址

                document.head.appendChild(tag)//script加入头部

            }

        </script>

    </body>
    #但是返回结果会出错，原因返回的结果不是script语法，所以要把返回结果必须是JS格式

    return HttpResponse("alter(123)") 正确

    return HttpResponse("")报错。

四：例子

#例子：通过script跨哉访问请求（js发送数据）

    工程2：

    #views.py

    from django.shortcuts import render,HttpResponse

    # Create your views here.

    def req(request):

        func=request.GET.get("func")

        return HttpResponse('func("XXX")') #返回func是js定义的函数

    #urls.py

    url(r'^req$',views.req),

    #起动地址

    http://127.0.0.1:8001/req

    工程1：

    #views.py

    from django.shortcuts import render,HttpResponse

    import requests

    # Create your views here.

    def a(request):

        return HttpResponse("ok")

    #urls.py

    #url(r'^a/', views.a),

    #模板

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

    </head>

    <body>

        <h1>js直接获取结果</h1>

        <input type="button" value="获取数据" id="ok_button" onclick="getData();">

        <div id=""container>

        </div>

        <script>

            //原生js

            function getData(){

                var tag=document.createElement("script") //创建script标签

                tag.src="http://127.0.0.1:8001/req?func=func" //要发送地址

                document.head.appendChild(tag)//script加入头部

            }

            #func=func 把js方法传递给后台

            function func(arg){

                alert(arg);

            }

        </script>

    </body>

    </html>

五：JSONP跨域请求的本质

    由于浏览器具有同源策略（阻止ajax跨域请求，但是无法阻止script）

    1）创建script标签

    2）src=远程地址

    3）返回的数据必须是js格式

    JSONP只能发GET请求

六：jquery跨域实现

#jsonp跨域请求jquery方式

    <script src="/static/jquery-1.12.4.js"></script>

    <script>

        //原生js

            $.ajax({

                url:"http://127.0.0.1:8001/req?",

                type:"POST",

                dataType:"jsonp",

                jsonp:"callback",//发送的参数

                jsonpCallback:"func",//发送参数的值 等价http://127.0.0.1:8001/req?callback=func

            })

             }

        function func(arg){

            alert(arg);

        }

    </script>

七：总结

　　就是利用script标签绕过同源策略，获得一个类似这样的数据，jsonpcallback是页面存在的回调方法，参数就是想得到的json。

36)django-jsonp跨域的更多相关文章

  1. Django学习---jsonp跨域请求

    jsonp跨域请求 我们通过ajax进行跨域请求的时候,请求发送过去,但是在接受返回数据的时候浏览器会进行拦截. 这是由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源 ...

  2. django - 总结 - 跨域请求

    script ->jsonp跨域 浏览器的同源策略:不能跨越网站请求信息: XMLHttpRequests遵循这个规定. 因此ajax等基于XML的都不能进行跨站请求 而我们知道img,ifra ...

  3. 06: AJAX全套 & jsonp跨域AJAX

    目录: 1.1 AJAX介绍 1.2 jQuery AJAX(第一种) 1.3 原生ajax(第二种) 1.4 iframe“伪”AJAX(第三种) 1.5 jsonp跨域请求 1.6 在tornad ...

  4. jsonp跨域简单应用（一）

    转载:http://www.cnblogs.com/cyg17173/p/5865364.html ashx+jsonp+document.referrer   -- 一年前学的JSONP 跨域,一年 ...

  5. ajax jsonp跨域 【转】

    跨域的基本原理:    JSONP跨域GET请求是一个常用的解决方案,    JSONP的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的 ...

  6. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  7. 借助node实战JSONP跨域

    一.前言: 浏览器安全是基于同源策略的.所谓同源策略就是三相同: 1.协议相同: 2.域名相同: 3.端口相同. 但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但NO!!为了规避这种限 ...

  8. jsonp跨域+ashx（示例）

    前言 做B/S项目的时候,我们一般使用jquery+ashx来实现异步的一些操作,比如后台获取一些数据到前台,但是如果ashx文件不在本项目下,引用的是别的域下的文件,这时候就访问不了.关于jsonp ...

  9. Jsonp跨域访问

    很早之前看过好几篇跨域访问的文章,然后做项目的时候基本没有遇到跨域访问的问题.不过该来的还是会来,前些天终于让我遇到了.于是重温了一下原理这些,再进行实战.于是现在也敢通过实战后的一些理解来和大家分享 ...

  10. jsonp 跨域请求

    背景: JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源 ...

随机推荐

  1. HanLP 关键词提取算法分析

    HanLP 关键词提取算法分析 参考论文:<TextRank: Bringing Order into Texts> TextRank算法提取关键词的Java实现 TextRank算法自动 ...

  2. 谷歌地图，国内使用Google Maps JavaScript API，国外业务

    目前还是得墙 <!DOCTYPE html> <html> <head> <meta name="viewport" content=&q ...

  3. 【由浅入深理解java集合】(五)——集合 Map

    前面已经介绍完了Collection接口下的集合实现类,今天我们来介绍Map接口下的两个重要的集合实现类HashMap,TreeMap.关于Map的一些通用介绍,可以参考第一篇文章.由于Map与Lis ...

  4. UVAlive 6697 Homework Evaluation

    借鉴了别人的博客啊,自己写写给以后的自己看吧 给出两个字符串,用第二个字符串去匹配第一个字符串,可以对第二个字符串进行删除或插入操作,一位匹配成功得8分失败-5分,如果插入或删除,对于连续插入或删除m ...

  5. ubuntu安装matplotlib一些坑

    ubuntu16.04,python2.7 安装matplotlib, 1.在root权限下执行命令 pip install matplotlib==1.5.1 这里有个困扰我一个星期的问题,系统都被 ...

  6. window中安装mongodb

    转自:https://blog.csdn.net/heshushun/article/details/77776706 一.先登录Mongodb官网https://www.mongodb.com/do ...

  7. Miller-Rabin判质数和Pollared-Rho因数分解

    朴素判质数:$ 在[2..\sqrt{n}]$范围内枚举逐一判断是不是$ n$的因数 时间复杂度:$ O(\sqrt{n})$ 当n达到$ 10^{18}$级别时,显然效率过低 Miller-Rabi ...

  8. Spring基础2

    一.Spring属性注入 1)构造方法属性注入 2)set方法属性注入:通过在bean对象所属类中提供相应字段的set方法,并在配置文件中配置<property.....> <bea ...

  9. 20165231 实验一 Java开发环境的熟悉

    实验报告封面 一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:王杨鸿永 学号:20165231 指导教师:娄嘉鹏 实验日期:2018年4月2日 实验时间:13:45 - 15:25 ...

  10. Delaunay triangulation

    1,先花个圆: detail模式执行. #define XY 0x00 #define XZ 0x01 #define YZ 0x02 #define pi 3.1415926 #define clo ...