• JSONP


    1. JSONP定义
        JSONP是英文JSON with Padding的缩写,是一个非官方的协议。它允许在服务器端生成script tags返回至客户端,通过javascript callback的形式来实现站点访问。 JSONP是一种script tag的注入,将server返回的response添加到页面实现特定功能。

    2. JSONP由来

        要解释JSONP的来由,先要说一下浏览器的“同源策略(SOP:Same Origin Policy)”。 简而言之,就是浏览器限制脚本程序只能和同协议、同域名、同端口的脚本进行交互,这包括共享和传递变量等。cookie的传递也是遵从同样策略。这就造成 一些涉及到多个服务器的应用在整合时一些麻烦。跨域访问的问题造成A站点的Ajax代码无法访问B站点的数据。

         如何解决跨域访问呢?那就要借助浏览器 的一个特性:尽管浏览器不允许页面中的脚本程序跨域读取数据,但却允许HTML引用跨域的资源,如图片,CSS和脚本程序。对于脚本程序的引用比较特殊, 它被浏览器解析以后,就和本地的脚本程序别无二致且可立即进行解释并执行。如在B站点的一个js文件,一个简单的提示框:alert(“This is Victor!”);。在A站点引用这个js,这个脚本就会在B站点的应用中执行,显示一个alert信息。由于站外脚本的引用是通过script tag来实现的,而脚本程序又可通过DOM的方式可以对HTML页面的所有标签进行控制(包括动态的创建script标签),这就可以实现通过调用站外程 序对本地资源进行更改了。另外,通过<script> 标记的使用,就可从服务端直接返回可执行的JavaScript函数调用或者JSON数据。

    3. JSONP原理与实现
        首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时,服务器先生成 JSON数据。然后以JavaScript 语法的方式,生成一个function, function名字就是传递上来的参数jsonp.  
        然后,将JSON数据直接以入参的方式,放置到function中,这样就生成了一段 js 语法的文档,返回给客户端。 
        最后,在客户端浏览器中解析script标签,并执行返回的JavaScript文档,此时数据作为参数,传入到了客户端预先定义好的回调函数里(动态执行回调函数) 。其实 JSONP是个很简单的一个东西。主要是利用了 <script/>标签对javascript文档的动态解析来实现。(其实也可以用eval函数) 

    JSONP实现代码:

    < script  type=" text/javascript" >       
    function jsonpCallback(result){
    alert(result.msg);
    }
    < /script>
    < script type=" text/javascript" src=" http://mydomain.com/jsonService?jsonp=jsonpCallback">
    < /script>

    注解:

    jsonCallback是获取跨域服务器上的JSON数据后的客户端的回调函数。 

    http://mydomain.com/jsonService?jsonp=jsonpCallback是获取跨域服务器JSON数据的接口,参数为回调函数的名字。返回的格式为:

    jsonpCallback({ msg:'this  is  json  data'} )

  • 相关阅读:
    【Hadoop报错】The directory item limit is exceeded: limit=1048576 items=1048576
    【Error】mysql的error.log中ranges: 268 max_threads: 4 split: 268 depth: 2是什么意思?
    【Hadoop】Hadoop集群组件默认端口
    【Python】用Python把从mysql统计的结果数据转成表格形式的图片并推送到钉钉群
    微信小程序 服务端shiro用户验证,偶然会出现验证失败的问题。
    微信小程序 数组复制 改变原数组 新数组也会自动变化
    Controller 在加入aop 后,@Autowired注入值为null
    gitblit仓库
    mybatis plus 增加数据后 返回主键id
    Shiro 访问 Swagger2报404 及 放行Swagger2
  • 原文地址:https://www.cnblogs.com/Cjch/p/2174827.html
Copyright © 2020-2023  润新知