jsonp介绍：

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。

利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。

用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

默认是由与浏览器的原因使得ajax不能跨域访问：

本站域名：http://www.py_test1.com:8080/index，

跨站域名：http://www.py_test2.com:8081/index

<body>

    <div>

        <input type="button" onclick="ajax_test();" value="跨域"/>

        <p>响应：</p>

        <div class="content">

        </div>

    </div>

</body>

</html>

<script>

    function ajax_test(){

        $.ajax({

            url:'http://www.py_test2.com:8081/index',

            dataType:'text',

            type:'post',

            data:{'k1':'v1'},

            success:function(data){

                $(".content").text(data);

            }

        })

    }

</script>

XMLHttpRequest cannot load http://www.py_test2.com:8081/index. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.py_test1.com:8080' is therefore not allowed access.

实际上信息已经发送到跨站域名网站中，若是信息正确，可以被处理，只是在消息回复到本站时，被浏览器进行了处理报错（同源策略）

浏览器对于ajax阻止跨域，对于script块，img块，iframe块等，其中具有src属性是允许跨域（相当于发送get请求获得资源），在许多网站中资源引入都使用跨域来完成

所以可以通过这些src属性进行跨域访问

办法一：JSONP方法

<input type="button" onclick="jsonP_test();" value="jsonP跨域"/>
    function jsonP_test(){

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

        ele.setAttribute('src','http://www.py_test2.com:8081/index');

        //添加以后就进行跨域操作

        document.head.appendChild(ele);

        //然后就不需要存在这个标签了

        document.head.removeChild(ele);

    }

但是这里面获取的资源只是简单的在script中进行了添加

<script>

    // t2.get    通过get方法跨域到http://www.py_test2.com:8081/index中请求到的某些数据，无法使用

</script>

但是如果服务端，即跨域端发送某些函数

    <script>

        // alert(123)    会在页面直接调用弹出窗口

    </script>

于是可以尝试客户端与服务端进行协商：

客户端定义好函数，服务端在传递的数据中调用该函数，并且在函数接口中传递参数

客户端定义函数：

    function func(dt){

        console.log(dt);

    }

服务端调用并传参：

self.write('func([11,22,33]);')

即可在客户端对传递的数据进行处理。

方法二：对ajax进行修改

    function jsonPajax2(){

        $.ajax({

            url:'http://www.py_test2.com:8081/index',

            dataType:'jsonp',

            jsonpCallback:'func',//发送成功后会自动执行这个函数，不写也会执行,只不过有时候会用到jsonp，需要和jsonpcallback联合使用

            //jsonp:'callback',//会把jsonpCallBack中的数据传送到服务端，服务端就可以对接收的数据进行动态处理，不需要知道客户端的函数名，直接对接收的数据和需要传递的数据进行拼接就可以

        });

    }

这里需要客户端和服务端进行函数名称保持一致，二服务端似乎对于这个函数名并不是非常感冒，要是传入其他函数名那么久不可用了，复用性太差。所以考虑通过传参将前端的函数名传入服务端，进行灵活调用，来组成字符串

就有了

   function jsonPaJax(){

        //是jquery对上述jsonp方法的实现和扩展

        $.ajax({

            url:'http://www.py_test2.com:8081/index',

            dataType:'jsonp',

            jsonp:'callback',//会把jsonpCallBack中的数据传送到服务端，服务端就可以对接收的数据进行动态处理，不需要知道客户端的函数名，直接对接收的数据和需要传递的数据进行拼接就可以

            jsonpCallback:'funcx',//发送成功后会自动执行这个函数，不写也会执行,只不过有时候会用到jsonp，需要和jsonpcallback联合使用

        });

    }

客户端随便定义一个函数，服务端在使用的时候只需要知道这个函数名是在参数callback中，进行调用组合，返回即可

    def get(self):

        #print(self.request.arguments)获取全部参数

        callback=self.get_argument('callback',None)

        self.write('%s([11,22,33]);'%func)

注意若是客户端jsonpCallback大小写写错，在服务端的callback中会出现'callback': [b'jQuery20004196553791305502_1520586446327']这种情况。

总结：实际上方法二就是在传入参数中进行了修改，我们也可以写成

function jsonPaJax(){

        //是jquery对上述jsonp方法的实现和扩展

        $.ajax({

            url:'http://www.py_test2.com:8081/index?callback=func',

            dataType:'jsonp',

            //jsonp:'callback',//会把jsonpCallBack中的数据传送到服务端，服务端就可以对接收的数据进行动态处理，不需要知道客户端的函数名，直接对接收的数据和需要传递的数据进行拼接就可以

            jsonpCallback:'func',//发送成功后会自动执行这个函数，不写也会执行,只不过有时候会用到jsonp，需要和jsonpcallback联合使用

        });

    }

或者改变方法一：

    function jsonP_test(){

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

        ele.setAttribute('src','http://www.py_test2.com:8081/index?callback=func');

        //添加以后就进行跨域操作

        document.head.appendChild(ele);

        //然后就不需要存在这个标签了

        document.head.removeChild(ele);

    }

ajax跨域原理以及jsonp使用的更多相关文章

  1. Ajax跨域原理及JQuery中的实现

    浅析Ajax跨域原理及JQuery中的实现分析   AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新.但是出于安全的考虑,ajax不允许跨域通信.如果尝试从不同的域请 ...

  2. JAVAEE——宜立方商城11：sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求（jsonp）

    1. 学习计划 第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建 需要创建一个sso服务工程,可 ...

  3. 浅析Ajax跨域原理及JQuery中的实现分析

    AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新.但是出于安全的考虑,ajax不允许跨域通信.如果尝试从不同的域请求数据,就会出现错误.如果能控制数据驻留的远程服务器 ...

  4. ajax跨域原理以及解决方案

    说明 跨域主要是由于浏览器的“同源策略”引起,分为多种类型,本文主要探讨Ajax请求跨域问题 前言 强烈推荐阅读参考来源中的文章,能够快速帮助了解跨域的原理 参考来源 本文参考了以下来源 浏览器同源政 ...

  5. 【PHP】Ajax跨域解决方案 、jsonp、cors

    参考文章: 1.https://blog.csdn.net/u014727260/article/details/72793459 (后台java,实际上差不多) 2. 如何解决ajax跨域传输 数据 ...

  6. [妙味Ajax]第三课：AJAX跨域解决方案：JSONP

    知识点总结: JSONP(JSON with Padding): 1.script标签 2.用script标签加载资源是没有跨域问题的 在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据), ...

  7. 前端筑基篇(一)->ajax跨域原理以及解决方案

    说明 跨域主要是由于浏览器的“同源策略”引起,分为多种类型,本文主要探讨Ajax请求跨域问题 前言 参考来源 什么是跨域 ajax跨域的表现 跨域的原理 如何解决跨域问题 JSONP方式解决跨域问题 ...

  8. 黑马学习Ajax 跨域资源共享 jQuery+jsonp实现

  9. 利用jsonp进行Ajax跨域请求

    在进行Ajax请求的时候经常会遇到跨域的问题,这个时候一般就会用到jsonp. 关于json和jsonp,网上有很多原理解释,这里就不多赘述,需要的自行搜索. 下面是一个简单的ajax跨域请求示例: ...

随机推荐

  1. Machine Learning Based Proactive Flow Entry Deletion for OpenFlow

    来源:IEEE 2018 作者:Hemin Yang and George F.Riley 摘要: 流表容量有限,因此高效管理流表至关重要.本文重点讨论了OpenFlow中定义的一种流表管理机制,即能 ...

  2. Java实现小学四则运算练习系统（UI）

    github项目地址 :https://github.com/feser-xuan/Arithmetic_test3_UI 小伙伴的博客链接:http://www.cnblogs.com/fukang ...

  3. RBAC权限管理及使用原生PHP实现

    关于RBAC的原理讲解在网上可以找到很多,推荐:编程浪子的RBAC讲解,本篇博客就不再累述RBAC的原理到底是什么样的. 传统的权限控制有ACL和RBAC方式,ACL的耦合度很高,扩展性不佳,RBAC ...

  4. MyBatis自动生成Java/C#的Bean（Entity）的等价MYSQL实现函数

    这是单元测试代码:TESTTITLECASE.sql SELECT TITLECASE('ABC_DEF_hgk') as BEANNAME FROM DUAL; SELECT TITLECASE(' ...

  5. [转帖] YAML 快速入门

    https://www.jianshu.com/p/97222440cd08 原始文档更加易读. YAML快速入门 叩丁狼教育 关注 2018.02.18 19:19* 字数 1776 阅读 876评 ...

  6. thread run 和 start 的区别

    run 方法 也可以调用线程启动   但是单线程(为顺序执行) 而start方法 启动的线程为多个线程之间争夺cpu的执行权(为随机的) 摘录于http://www.cnblogs.com/sunfl ...

  7. python decimal.quantize()参数rounding的各参数解释与行为

    我最开始其实是由于疑惑ROUND_FLOOR和 ROUND_DOWN的表现区别才看了一波文档,但是感觉拉出一票以前没有留意过的东西. 贴一个decimal文档里面的解释: ROUND_CEILING ...

  8. Java多线程：用三个线程控制循环输出10次ABC

    转载:http://www.cnblogs.com/gaopeng527/p/5257884.html 题目:有A,B,C三个线程, A线程输出A, B线程输出B, C线程输出C,要求, 同时启动三个 ...

  9. matplotlib之scatter自动绘制散点

    # 使用matplotlib.pyplot.scatter绘制散点 import matplotlib.pyplot as plt from pylab import mpl # 设置默认字体,解决中 ...

  10. Linux学习之/etc/init.d/目录和rc.local脚本

    init.d目录中包含很多系统服务的启动和停止脚本,比较常用的就是网络服务,当你修改了网络配置时,可以自行 sudo /etc/init.d/networking restart  命令来重启网络服务 ...