js jsonp


json和jsonp的关系

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

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

同源策略

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

同源策略要求:

  1. 协议类型相同 -> httphttpsftp等等
  2. 主机地址相同 -> https://www.baidu.com/ 或者自己的主机ip地址
  3. 端口号相同 -> 808080等等

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

jsonp原理

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

  1. <script>标签可以使用cdn加速(根据浏览器所在网络地区,从最近的服务器下载js脚本,一般下载框架和库),那么cdn的服务器毫无疑问是不同源的。所以,<script>标签可以跨域访问别的服务器
  2. <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);
    }
});

方式二

待续。。。


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>