Jsonp及其实现原理

参考资料

一、先说说JSON

首先JSON是一种基于文本的数据交换方式，或者叫做数据描述格式。

JSON的优点：

基于纯文本，跨平台传递极其简单；
Javascript原生支持，后台语言几乎全部支持；
轻量级数据格式，占用字符数量极少，特别适合互联网传递；
可读性较强，虽然比不上XML那么一目了然，但在合理的依次缩进之后还是很容易识别的；
容易编写和解析，当然前提是你要知道数据结构；

二、同源策略

一个众所周知的问题，由于同源策略，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":"asw"}]';
$data = "JSON_CALLBACK(" . $data . ")";
echo $data;
?>

Jsonp及其实现原理

一、先说说JSON

二、同源策略

三、JSONP

四、代码

相关推荐