解决同源策略的两个方法

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. nginx +uwsgi + django配置

    一 安装 nginx 二 安装 uwsgi  ,pip install uwsgi 三 配置nginx 打开 nginx.conf文件, location / { # root html; # ind ...

  2. linux中nl用法

    linux 中nl 命令使用 nl :添加行号打印 -b:   指定行号指定的方式,主要有两种:    -b a : 表示不论是否为空行,都同样列出行号    -b t : 如果有空行,则不列出那一行 ...

  3. 本地搭建Hadoop伪分布式环境之四：开启搭建Hadoop2.4.0之旅

    1.准备软件  64位下载包下载:     hadoop-2.4.0-64bit.tar.gz 百度网盘: 链接: http://pan.baidu.com/s/1hqEDe2S password: ...

  4. 对国外某hotel的内网域简单渗透

    Penetration Testing不单单是一个博客,更热衷于技术分享的平台. 本文将讲述对国外某一hotel的渗透测试,让更多的人安全意识得到提高,有攻才有防,防得在好,也有疏忽的地方,这就是为啥 ...

  5. js:argument

    引用:http://www.cnblogs.com/lwbqqyumidi/archive/2012/12/03/2799833.html    http://www.cnblogs.com/Fskj ...

  6. SharePoint 2013 对话框

    The quick way to open a sharepoint 2013 dialog modal form is via Javascript below 1 2 3 4 5 function ...

  7. Hbase Basic

    启动:start-hbase.sh 停止:stop-hbase.sh 进入shell:hbase shell 状态:status 创建表:create 'tableName', 'colFam1' 查 ...

  8. cookie-小总结吧

    写入common.js文件,其他页面调用即可: //添加cookie值 function addcookie(name, value, days) { days = days || 0; var ex ...

  9. NHibernate3剖析：Mapping篇之ConfORM实战(1):概览

    ORuM思想浮出 对于ORM(Object Relational Mapping)我们太熟悉了,可是我们从还有一个角度能够想象出ORuM(Object Relational un-Mapping)的思 ...

  10. rootkit基础

    应用程序总是离不开系统内核所提供的服务,比如它要使用内存的时候,只要跟操作系统申请就行了,而不用自己操心哪里有空闲的内存空间等问题,实际上,这些问题是由操作系统的内核来代劳的.站在黑客的角度讲,如果能 ...