Jsonp及其完成道理

2024年5月11日 164次阅读 来源: 小小赵老汉

参考资料

一、先说说JSON

起首JSON是一种基于文本的数据交换体式格局，或许叫做数据形貌花样。

JSON的长处：

  1. 基于纯文本，跨平台通报极为简朴；

  2. Javascript原生支撑，背景言语险些悉数支撑；

  3. 轻量级数据花样，占用字符数目少少，迥殊合适互联网通报；

  4. 可读性较强，虽然比不上XML那末一览无余，但在合理的顺次缩进以后照样很轻易辨认的；

  5. 轻易编写和剖析，固然条件是你要知道数据结构；

二、同源战略

一个尽人皆知的题目，因为同源战略，Ajax直接要求平常文件存在跨域无权限接见的题目。

同源战略，它是由Netscape提出的一个有名的安全战略，如今一切支撑JavaScript的浏览器都邑运用这个战略。

然则，Web页面上挪用js文件时则不受是不是跨域的影响，不仅如此，通常具有”src”属性的标签都具有跨域的才能，比方<script>、<img>、<iframe>。

因而，假如想经由过程纯web端跨域接见数据就只有一种计划，那就是在长途服务器上想法把数据装进js花样的文件里，供客户端挪用和进一步处置惩罚。

三、JSONP

Jsonp(JSON with Padding) 是 json 的一种”运用形式”，能够让网页从别的域名（网站）那猎取数据，即跨域读取数据。

客户端经由过程与挪用剧本如出一辙的体式格局，来挪用跨域服务器上动态天生的js花样文件（平常以JSON为后缀），不言而喻，服务器之所以要动态天生JSON文件，目标就在于把客户端须要的数据装入进去。

客户端在对JSON文件挪用胜利以后，也就取得了本身所需的数据，剩下的就是根据本身需求举行处置惩罚和展示了，这类猎取长途数据的体式格局看起来非常像AJAX，但实在并不一样。

为了便于客户端运用数据，逐步形成了一种非正式传输协定，也就是JSONP，该协定的一个要点就是许可用户通报一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，如许客户端就能够随便定制本身的函数来自动处置惩罚返回数据了。

ajax和jsonp本质上是完整差别的东西。ajax的中心是经由过程XmlHttpRequest猎取非本页内容，而jsonp的中心则是动态增加<script>标签来挪用服务器供应的js剧本。

四、代码

以两段简朴的代码来申明jsonp的运转体式格局：

  • 原生JS

<button onclick="jsonpServer('jsonp.php')">JSONP</button>
function jsonpServer(url) {
    var script = document.createElement("script");
    script.setAttribute("src", url);
    document.body.appendChild(script);
}   
function JSON_CALLBACK(data) {
    console.log(data);
}
<?php
header('Content-Type: application/javascript; charset=UTF-8');
$data = '[{"id":"1","name":"wsscat"},{"id":"2","name":"asw"}]';
$data = "JSON_CALLBACK(" . $data . ")";
echo $data;
?>

  • jQuery

    • type：要求体式格局 GET/POST

    • url:要求地点

    • async:布尔范例，默以为true 示意要求是不是为异步，假如为false示意为同步。

    • dataType：返回的数据范例

    • jsonp：通报给要求处置惩罚顺序或页面的，用以取得jsonp回调函数名的参数名(平常默以为callback)

    • jsonpCallback：自定义的jsonp回调函数称号，默以为jQuery自动天生的随机函数名，也能够写”?”，jQuery会自动为你处置惩罚数据

    • success：挪用胜利实行的函数

    • error：挪用非常处置惩罚函数

$.ajax({
    url:'index.php',
    type:'get',
    dataType:'jsonp',
    // jsonp:'JSON_CALLBACK',
    jsonpCallback:'JSON_CALLBACK',
    success:function(data){
        console.log(data)
    }
})
<?php
header('Content-Type: application/javascript; charset=UTF-8');
$data = '[{"id":"1","name":"wsscat"},{"id":"2","name":"asw"}]';
$data = "JSON_CALLBACK(" . $data . ")";
echo $data;
?>
    原文作者：小小赵老汉
    原文地址: https://segmentfault.com/a/1190000008479489
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞