JSONP是什么

2024年3月19日 238次阅读 来源: anonymous66

一、JSONP的降生

  • 起首，由于ajax没法跨域，然后开发者就有所思索

  • 其次，开发者发明， <script>标签的src属性是能够跨域的
    把跨域效劳器写成 挪用当地的函数 ，回调数据返来不就好了？

  • json恰好被js支撑（object）

  • 挪用跨域效劳器上动态天生的js格式文件（不论是什么范例的地点，终究天生的返回值都是一段js代码）

  • 这类猎取长途数据的体式格局看起来异常像ajax，但实在并不一样
    便于客户端运用数据，逐步形成了一种非正式传输协定，人们把它称作JSONP。

  • 通报一个callback参数给跨域效劳端，然后跨域效劳端返回数据时会将这个callback参数作为函数名来包裹住json数据即可。

二、老板，来一斤栗子。
【栗子一】
跨域效劳器
文件：remote.js
代码：

alert('我是长途文件');

当地

<script type="text/javascript" src="跨域效劳器/remote.js"></script>

这边做的就是直接引入一个js，页面将会弹出一个提醒窗体，显现 我是长途文件。

【栗子二】
跨域效劳器
文件：remote.js
代码：

localHandler({"result":"我是长途js带来的数据"});

当地

<script type="text/javascript"> 
    var localHandler = function(data){
        alert('我是当地函数，能够被跨域的remote.js文件挪用，长途js带来的数据是：' + data.result); 
    }; 
</script> 
<script type="text/javascript" src="跨域效劳器/remote.js"></script>

这边做的是
1、当地定义一个函数
2、引入一个js
3、被引入的js内里，挪用这个函数

页面将会弹出一个提醒窗体。显现当地函数被跨域的长途js挪用胜利，而且还吸收到了 我是长途js带来的数据。

新问题涌现了：让长途js晓得它应当挪用的当地函数叫什么名字呢？毕竟是jsonp的效劳者都要面临许多效劳对象，而这些效劳对象各自的当地函数都不雷同啊？

【栗子三】
跨域效劳端供应的js剧本动态天生，如许挪用者能够传一个参数过去通知跨域效劳端“我想要一段挪用XXX函数的js代码，请你返回给我”，因而跨域效劳器就能够根据客户端的需求来天生js剧本并相应了。

跨域效劳器
文件：flightResult.php
代码：

flightHandler({
    "code":"CA1998",
    "price": 1780,
    "tickets": 5
});

当地

<script type="text/javascript"> 
    // 获得航班信息查询效果后的回调函数 
    var flightHandler = function(data){
        alert('你查询的航班效果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
    }; 
    // 供应jsonp效劳的url地点（不论是什么范例的地点，终究天生的返回值都是一段javascript代码） 
    var url = "跨域效劳器/flightResult.php?code=CA1998&callback=flightHandler";
    // 建立script标签，设置其属性 
    var script = document.createElement('script'); 
    script.setAttribute('src', url); 
    // 把script标签到场head，此时挪用最先 
    document.getElementsByTagName('head')[0].appendChild(script); 
</script>

此次我们做的是
1、动态建立剧本
2、url中通报了一个code参数，效劳器去做查询CA1998次航班的信息，callback参数通知效劳器，我的当地回调函数叫做flightHandler
3、跨域效劳端挪用这个函数flightHandler 页面将会弹出一个提醒窗体。把票价、余票以及张数给通报返来了。

三、那末效劳器究竟做了什么呢？ 说究竟，就是拼接字符串。

// 数据
$data = [
    "name":"anonymous66",
    "age":"18",
    "like":"jianshu"
];
// 吸收callback函数称号
$callback = $_GET['callback'];
// 输出
echo $callback . "(" . json_encode($data) . ")";

四、与AJAX的区分是什么？
ajax和jsonp本质上是差别的东西。
ajax的中心是经由过程XmlHttpRequest猎取非本页内容
jsonp的中心则是动态增加<script>标签来挪用效劳器供应的js剧本。

五、结语
本篇文章是对JSONP的道理扫盲，平常许多开发者会运用却不晓得道理，这在进修和生长的路上不算功德。so，晓得jsonp道理，你又能够加50块工资了。

    原文作者：anonymous66
    原文地址: https://segmentfault.com/a/1190000007935557
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞