Jsonp及其实现原理

参考资料

1、先说说JSON

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

JSON的优势：

1. 基于纯文本，跨平台传递极其简单；

2. Javascript原生支持，后台语言几乎所有支持；

3. 轻量级数据格式，占用字符数量极少，特别适合互联网传递；

4. 可读性较强，虽然比不上XML那么一目了然，但在合理的依次缩进以后仍是很容易识别的；

5. 容易编写和解析，固然前提是你要知道数据结构；

2、同源策略

一个众所周知的问题，因为同源策略，Ajax直接请求普通文件存在跨域无权限访问的问题。

同源策略，它是由Netscape提出的一个著名的安全策略，如今全部支持JavaScript的浏览器都会使用这个策略。

可是，Web页面上调用js文件时则不受是否跨域的影响，不只如此，凡是拥有”src”属性的标签都拥有跨域的能力，好比<script>、<img>、<iframe>。

所以，若是想经过纯web端跨域访问数据就只有一种方案，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理。

3、JSONP

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可让网页从别的域名（网站）那获取数据，即跨域读取数据。

客户端经过与调用脚本如出一辙的方式，来调用跨域服务器上动态生成的js格式文件（通常以JSON为后缀），显而易见，服务器之因此要动态生成JSON文件，目的就在于把客户端须要的数据装入进去。

客户端在对JSON文件调用成功以后，也就得到了本身所需的数据，剩下的就是按照本身需求进行处理和展示了，这种获取远程数据的方式看起来很是像AJAX，但其实并不同。

为了便于客户端使用数据，逐渐造成了一种非正式传输协议，也就是JSONP，该协议的一个要点就是容许用户传递一个callback参数给服务端，而后服务端返回数据时会将这个callback参数做为函数名来包裹住JSON数据，这样客户端就能够随意定制本身的函数来自动处理返回数据了。

ajax和jsonp本质上是彻底不一样的东西。ajax的核心是经过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

4、代码

以两段简单的代码来讲明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;
?>