解决同源策略的两个方法

1 . JSONP

　　jsonp (将 JSON 数据填充进回调函数,这就是JSONP的JSON+Padding 的含义)

　　jsonp是json用来跨域的一个东西,原理是通过script标签的跨域特性来绕过同源策略

　　思考 : 这算怎么回事 ?

<script src="http://code.jquery.com/jquery-latest.js"></script>

借助 script 标签,实现跨域请求,示例 :

所以只是单纯的返回一个也没有什么意义,我们需要的是数据

如下 : 可以返回一个字典,不过也可以返回其他的,(简单的解决了跨域,利用script)

项目一 :

<body>

<h1>项目一</h1>

<button class="send_jsonp">jsonp</button>

<script>

    $(".send_jsonp").click(function () {

        $.ajax({

            url:"",

            success:function (data) {

                console.log(data)

            }

        })

    });

    function func(arg) {

        console.log(arg)

    }

</script>

<script src="http://127.0.0.1:8080/ajax_send2/"></script>

</body>

项目二 :

def ajax_send2(request):

    import json

    print(222222)

    # return HttpResponse("func('name')")

    s = {"name":"haiyan","age":12}

    # return HttpResponse("func('name')")

    return HttpResponse("func('%s')"%json.dumps(s))   #返回一个func()字符串，正好自己的ajax里面有个func函数，就去执行func函数了，

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　arg就是传的形参

这样就取到值了 :

　　这其实就是JSONP的简单实现模式，或者说是JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。

　　将JSON数据填充进回调函数，这就是JSONP的JSON+Padding的含义。

　　但是以上的方式也有不足，回调函数的名字和返回的那个名字的一致。并且一般情况下，我们希望这个script标签能够动态的调用，而不是像上面因为固定在html里面所以没等页面显示就执行了，很不灵活。我们可以通过javascript动态的创建script标签，这样我们就可以灵活调用远程服务了。

　　解决办法：javascript动态的创建script标签

===========================jQuery实现=====================

{#    创建一个script标签，让他请求一次，请求完了删除他#}

    //动态生成一个script标签,直接可以定义个函数，放在函数里面

    function add_script(url) {

        var ele_script = $("<script>");

        ele_script.attr("src",url);

        ele_script.attr("id","script");

        $("body").append(ele_script);

        $("#script").remove()

    }

    $(".kuayu").click(function () {

       add_script("http://127.0.0.1:8080/ajax_send2/")

    });

</script>

==================js实现==========================

<button onclick="f()">sendAjax</button>

<script>

    function addScriptTag(src){

         var script = document.createElement('script');

         script.setAttribute("type","text/javascript");

         script.src = src;

         document.body.appendChild(script);

         document.body.removeChild(script);

    }

    function func(name){

        alert("hello"+name)

    }

    function f(){

         addScriptTag("http://127.0.0.1:7766/SendAjax/")

    }

</script>

　　为了更加灵活，现在将你自己在客户端定义的回调函数的函数名传送给服务端，服务端则会返回以你定义的回调函数名的方法，将获取的json数据传入这个方法完成回调：

function f(){

         addScriptTag("http://127.0.0.1:7766/SendAjax/?callbacks=func")

    }

将视图views改为

def SendAjax(request):

    import json

    dic={"k1":"v1"}

    print("callbacks:",request.GET.get("callbacks"))

    callbacks=request.GET.get("callbacks")   #注意要在服务端得到回调函数名的名字

    return HttpResponse("%s('%s')"%(callbacks,json.dumps(dic)))

2 . jQuery对jsonp的实现

getJSON 

jQuery框架也当然支持jsonp, 可以使用 $.getJSON(url,[data],[callback])方法

<button onclick="f()">sendAjax</button>

<script>

    function f(){

          $.getJSON("http://127.0.0.1:7766/SendAjax/?callbacks=?",function(arg){

            alert("hello"+arg)

        });  匿名函数

    }

</script>

8002的views不改动。

结果是一样的，要注意的是在url的后面必须添加一个callback参数，这样getJSON方法才会知道是用JSONP方式去访问服务，callback后面的那个？是内部自动生成的一个回调函数名。

此外，如果说我们想指定自己的回调函数名，或者说服务上规定了固定回调函数名该怎么办呢？我们可以使用$.ajax方法来实现

$.ajax

<script>

    function f(){

          $.ajax({

                url:"http://127.0.0.1:7766/SendAjax/",

                dataType:"jsonp",

                jsonp: 'callbacks',   #键

　　　　　　　　　 jsonpCallback:"SayHi" #函数的名字

 }); } function SayHi(arg){ alert(arg); } </script>

8002的views不改动。

当然，最简单的形式还是通过回调函数来处理：

<script>

    function f(){

            $.ajax({

               url:"http://127.0.0.1:7766/SendAjax/",

               dataType:"jsonp",            //必须有，告诉server，这次访问要的是一个jsonp的结果。

               jsonp: 'callbacks',          //jQuery帮助随机生成的：callbacks="wner"

               success:function(data){

                   alert("hi "+data)

              }

         });

       }

</script>

jsonp: 'callbacks'就是定义一个存放回调函数的键，jsonpCallback是前端定义好的回调函数方法名'SayHi'，server端接受callback键对应值后就可以在其中填充数据打包返回了;

jsonpCallback参数可以不定义，jquery会自动定义一个随机名发过去，那前端就得用回调函数来处理对应数据了。利用jQuery可以很方便的实现JSONP来进行跨域访问。　　

注意 JSONP一定是GET请求

3 . 应用

 // 跨域请求实例

    $(".jiangxiTV").click(function () {

        $.ajax({

            url:"http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403",

             dataType: 'jsonp',

             jsonp: 'callback',

             jsonpCallback: 'list',

             success:function (data) {

                 console.log(data.data);   //  [{},{},{},{},{},{}]

                 week_list=data.data;

                 $.each(week_list,function (i,j) {

                     console.log(i,j);  // 1 {week: "周一", list: Array(19)}

                     s="<p>"+j.week+"列表</p>";

                     $(".show_list").append(s);

                     $.each(j.list,function (k,v) {  // {time: "0030", name: "通宵剧场六集连播", link: "http://www.jxntv.cn/live/jxtv2.shtml"}

                          a="<p><a href='"+v.link+"'>"+v.name+"</a></p>";

                          $(".show_list").append(a);

                     })

                 })

             }

        })

    })

前端JSONPJIE解决跨域问题的更多相关文章

  1. Vue 本地代理 纯前端技术解决跨域

    vue-axios获取数据很多小伙伴都会使用,但如果前后端分离且后台没设置跨域许可,那要怎样才能解决跨域问题? 常用方法有几种: 通过jsonp跨域 通过修改document.domain来跨子域 使 ...

  2. 搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

    什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...

  3. web添加第三方应用，前端解决跨域问题的8种方案

    应用场景 web应用通过QQ登录授权实现第三方登录. 操作步骤 1. 注册成为QQ互联平台开发者,http://connect.qq.com/ 2. 准备一个可访问的域名,如dev.foo.com 3 ...

  4. 前端通过Nginx反向代理解决跨域问题

    在前面写的一篇文章SpringMVC 跨域,我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题,解决方式主要有如下三种方式: JSONP CORS WebSocket 可是这几种方式都是基 ...

  5. [转] js前端解决跨域问题的8种方案（最新最全）

    1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.j ...

  6. 前端如何使用proxyTable和nginx解决跨域问题

    最近经常遇到跨域的问题,有时候问题虽然解决了,但是还是会有些模棱两可概念不清,于是在网上看了一些教程结合实际使用,做个笔记. 1.跨域原因 浏览器的限制 跨域(协议/域名/端口的不同) XMLHttp ...

  7. express搭建后端请求路由，前端进行访问对应的接口 后端解决跨域

    代码在 ==>E:\nodes实战\myserve\testserve 1 express搭建后端请求路由,前端进行访问对应的接口 1) 创建项目目录 express 项目名 -e 然后按照提示 ...

  8. 前端解决跨域问题的终极武器——Nginx反向代理

    提到代理,分为:正向代理和反向代理. 正向代理:就是你访问不了Google,但是国外有个VPN可以访问Google,你访问VPN后叫它访问Google,然后把数据传给你. 正向代理隐藏了真实的客户端. ...

  9. VUE前端项目配置代理解决跨域问题

    VUE前端项目配置代理解决跨域问题 问题如下,经常在本地调试接口出现这种问题 解决方式1:Chrome 的扩展插件 以前使用Chrome 的扩展插件,但是有时候还是会出现莫名其妙的问题. 需要梯子才行 ...

随机推荐

  1. TOYS-POJ2318

    本题主要是确定给定的点在那块区域.原题给出n条直线,将长方形分为n+1快区域.我们可以对每个给定的点来判断它在那块区域,判段方法可以根据点与直线的位置关系,具体如下,对于点(x0,y0)和直线ax+b ...

  2. css :before 和 :after

    :before p:before 在每个 <p> 元素的内容之前插入内容. 2 :after p:after 在每个 <p> 元素的内容之后插入内容. 2 <!DOCTY ...

  3. (转)python装饰器二

    Python装饰器进阶之二 保存被装饰方法的元数据 什么是方法的元数据 举个栗子 def hello(): print('Hello, World.') print(dir(hello)) 结果如下: ...

  4. 【GLSL教程】（七）逐像素的光照 【转】

    http://blog.csdn.net/racehorse/article/details/6662540 逐像素的方向光(Directional Light per Pixel) 这一节将把前面的 ...

  5. 危急，不要任意让站点记住password自己主动登陆！

    为了方便用户登录,差点儿全部的站点都实现了"记住password"."自己主动登陆"这样似乎人性化的功能. 我也非常喜欢这个功能,由于我自己的脑子实在是讨厌记东 ...

  6. MetaQ简单实用demo

    Metaq的生产者代码 import java.io.BufferedReader; import java.io.InputStreamReader; import com.taobao.metam ...

  7. MAC - 命令行中用sublime打开指定文件，使用ln命令建立软链接

    眼下sublime是mac下最好的文本编辑软件.常常要使用它打开一些文件,比如html,js,txt,json等文件,可是sublime2默认不支持在命令行下调用.经过研究发现能够用建立软连接的方式调 ...

  8. eletron 播放rtmp flash 播放器问题

    1 安装 flash https://www.flash.cn/ 2 man.js 配置 参考 https://newsn.net/say/electron-flash-win.html 3 播放器 ...

  9. UVA12096 - The SetStack Computer(set + map映射)

    UVA12096 - The SetStack Computer(set + map映射) 题目链接 题目大意:有五个动作: push : 把一个空集合{}放到栈顶. dup : 把栈顶的集合取出来, ...

  10. 1、C++的的升级

    1.C语言的缺点 (1)重用性差 (2)维护性差 2.C++ 从面向世界的需求出发来设计我们的程序, 3. 使用增强 A. ; i < ; i++) { } C语言编译器的话,会报错,因为C语言 ...