Jsonp及其实现原理

参考资料

一、先说说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;
?>