zoukankan      html  css  js  c++  java
  • JSONP

    原理:

    Web页面上调用js文件时不受是否跨域的影响(不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>)为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了

    ------------------------------------------------------------------------------------------------

    最简单的例子:

    其他域的一个qiezi.js 里面一段JS,比如alert('qiezi');

    当前域引用<script type="text/javascript" src="http://xxx.com/qiezi.js"></script>

    ------------------------------------------------------------------------------------------------

    进一步的例子:

    其他域:

    qiezi({'name':'zhang','age':'10000'}) //方法里面包含一段需要传递的JSON数据

    当前域:

    function  qiezi(data){

    alert(data) //获取传递过来的数据

    }

    ------------------------------------------------------------------------------------------------

    更进一步的例子:

    我们的想法是要把当前的函数名告诉对方,然后让他知道对应的需要执行的方法名

    其他域:

    fnName({'name':'zhang','age':'10000'});

    当前域:

    function fnName(data){

    alert(data) //获取传递过来的数据

    }

    var eleScript=document.createElement('script');
    eleScript.type='text/javascript';
    eleScript.src='http://xxx.com?callback=fnName';//把fnName传递给对方
    document.getElementsByTagName('head')[0].appendChild(eleScript);

    ------------------------------------------------------------------------------------------------

    jquery中对jsonp的使用:

    $.ajax({

    type:'get',

    async: false,

    url:'https://api.douban.com/v2/book/1220562',

    dataType:'jsonp',
    jsonp: "callback",//传递给请求处理程序或页面的,默认为:callback
    jsonpCallback:'fnName',//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
    success:function(data){

    if(data){

    console.info(data);

    }}

    //jsonp参数是告诉对方我的这个回掉函数就是callback名字叫jsonpCallback的值,相当于http://xxx.com?callback=fnName

    })

    ------------------------------------------------------------------------------------------------

    $.getJSON(url,data,success(data,status,xhr))

    $.getJSON('http://xxx.com?callback=fnName',{'name':'zhang','age':'10000'},function(data,status,xhr){

    console.info(data);

    })

  • 相关阅读:
    Django配置MySQL数据库教程
    给大家发个Python和Django的福利吧,不要钱的那种~~~
    Django 设置admin后台表和App(应用)为中文名
    Django 配置JWT认证方式
    威联通(NAS)应用篇:自建OwnCloud网盘(百度网盘,拜拜~~~)
    请不要浪费你的生命,一文多发推广就用它(OpenWrite)
    Django ORM 查询表中某列字段值
    【Django 2.2文档系列】Model 外键中的on_delete参数用法
    嵌入式、C语言位操作的一些技巧汇总
    【RT-Thread笔记】IO设备模型及GPIO设备
  • 原文地址:https://www.cnblogs.com/leyi/p/4528501.html
Copyright © 2011-2022 走看看