解决同源策略的两个方法

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. 排序算法之高速排序（Java）

    //高速排序 public class Quick_Sort { // 排序的主要算法 private int Partition(int[] data, int start, int end) { ...

  2. 通过run configuration启动项目

    系统通过配置加载路径是通过classpath加载绝对路径 设置属性选中某个项目,然后在工具栏中选择"Run-->Run Confgurations“,然后在对话框的右边选择" ...

  3. windows中静态库lib和动态dll的区别及使用方法

    1. 静态库lib和动态dll的区别 1.1 项目类型 VS在建Win32项目时,有以下选项: windows应用程序控制台应用程序DLL静态库最后两个类型:DLL和静态库,这两种项目类型是不可以单独 ...

  4. PGM图片格式与代码

    这两天在搞神经网络,里面的一个人脸数据库的图片格式是PGM,事实上之前早就知道了这个图片格式,可是没去深究这个图片格式的数据究竟是什么安排的.搜索了下百度百科,发现介绍的真是简单,以下就自己来系统地整 ...

  5. ps快捷键记录

    alt+delete  前景色填充 ctrl+delete  背景色填充 alt+shift+鼠标调节  变换选取,做圆环 ctrl+t  自由变换 alt+鼠标拖动  快捷复制某区域 delete ...

  6. libGDX 模块概览

    本文章翻译自libGDX官方wiki,.转载请注明出处:http://blog.csdn.net/kent_todo/article/details/37940595 libGDX官方网址:http: ...

  7. 【Excle数据透视】如何创建一个数据透视表

    数据透视表可以汇总.分析.浏览和提供工作表数据或外部数据源的汇总数据 创建方法一 通过”插入”创建,具体操作请看下图: 创建方法二 通过快捷键创建 使用[ALT+D+P]创建 首先按下alt键,然后依 ...

  8. 在Centos 7上安装配置 Apche Kafka 分布式消息系统集群

    Apache Kafka是一种颇受欢迎的分布式消息代理系统,旨在有效地处理大量的实时数据.Kafka集群不仅具有高度可扩展性和容错性,而且与其他消息代理(如ActiveMQ和RabbitMQ)相比,还 ...

  9. Android 音频 OpenSL ES 录音 采集

    1,; int channelConfig = AudioFormat.CHANNEL_OUT_STEREO; int audioFormat = AudioFormat.ENCODING_PCM_1 ...

  10. 如何编译文件（gcc + nasm）

    [0]README 编译文件(nasm + gcc),特别是编译目标文件的依赖文件:本文旨在回顾 gcc 和 nams 编译器的编译命令,以及如果有多个依赖文件该如何编译: [1]编译文件 1.1)编 ...