js jsonp - HelloWorld开发者社区

json和jsonp的关系

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript (w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

json和jsonp缩写只相差一个字母，但是两者却完全不同。前者是一种数据的表达方式，后者则是网络请求的一种解决方案。

同源策略

使用ajax发送网络请求有一个条件，那就是同源策略。

同源策略要求：

协议类型相同 -> http、https、ftp等等
主机地址相同 -> https://www.baidu.com/ 或者自己的主机ip地址
端口号相同 -> 8080、80等等

例如平常使用webstorm进行调试的时候，webstorm会开一个本地服务器http://localhost:63342/xxxx，但是如果你使用ajax去访问https://www.baidu.com/之类的服务器你是无法拿到数据的。实际上浏览器已经拿到数据，但是做了一层隔离，不给你数据。

jsonp原理

在说原理之前首先要了解两个关于<script>的特点

<script>标签可以使用cdn加速（根据浏览器所在网络地区，从最近的服务器下载js脚本，一般下载框架和库），那么cdn的服务器毫无疑问是不同源的。所以，<script>标签可以跨域访问别的服务器。
<script>标签是通过src节点属性获取js代码的，并且获取到的代码可以直接执行。

在了解了上面的2个<script>的特点之后大概都能猜出来，jsonp就是使用<script>以上两个特点来实现的，具体的实现方式有2种。

方式一
1. 创建一个函数（名字随机生成，避免多次请求被覆盖），并且接收一个参数（服务器返回的数据）。
2. 利用<script>标签发送请求，拼接上callback=方法名参数。
3. 后端要求接收这个callback参数，拿到方法名后在方法名后拼接()，并且传入返回的数据

这种方式对于php来说就是字符串拼接，但是传回来的时候则是被js解析成调用对应的方法了。

// php
$res = file_get_contents($url);
$func = $_GET[callback];

echo callback.'('.$res.')';

方式二
1. 使用php或者nodejs去访问需要跨域的请求
2. 用ajax访问这个php或者nodejs脚本

jsonp无论如何都要后端支持（要么是自己的后端写的php，要么是别人接口支持jsonp跨域的回调方法），否则无法使用。

　方式一示例

// 1. 创建一个script标签
var script = document.createElement('script');

// 2. 随机生成一个方法
// 用时间戳作为种子，这样随机生成的方法名绝对没有重复的。
var funcName = 'jsonpFunc' + Math.floor(new Date().getTime() * Math.random());
window[funcName] = function (json) {
    console.log(json);

    // 把请求完的标签从文档中移除
    document.head.removeChild(script);
};

// 3. 拼接请求地址，加上回调
script.src = 'http://api.douban.com/v2/movie/in_theaters?callback=' + funcName;

// 4. 把script标签放到文档中，就会发送请求
document.head.appendChild(script);

封装一下：

window.myJsonp = function (opt) {

    // 简单的容错
    if (!opt || !opt.url) return;
    opt.callback = opt.callback || 'callback';
    opt.params = opt.params || {};
    opt.callback = opt.callback || function () {};

    // 1. 创建一个script标签
    var script = document.createElement('script');

    // 2. 随机生成一个方法
    var funcName = 'jsonpFunc' + Math.floor(new Date().getTime() * Math.random());
    window[funcName] = function (json) {

        // 5. 把请求完的标签从文档中移除
        document.head.removeChild(script);
        // 6. 删除添加到window的方法名称，避免污染
        delete window[funcName];

        // 7. 把获取到的数据通过回调的方式传出去
        opt.callback(json);
    };

    // 3. 拼接请求地址，加上回调（参数拼接和get请求一致）
    var params = '';
    for (var key in opt.params) {
        params += key + '=' + opt.params[key] + '&';
    }
    script.src = opt.url + '?' + params + 'callback=' + funcName;

    // 4. 把script标签放到文档中，就会发送请求
    document.head.appendChild(script);
};


// 使用
myJsonp({
    url: 'http://api.douban.com/v2/movie/in_theaters',
    callback: function (json) {
        console.log(json);
    }
});