jsonp 概念及简单实现

发表于 | 分类于

一说前端跨域你想到什么？肯定是大名鼎鼎的 jsonp。

什么是 jsonp ？

那什么是 jsonp ，通俗的说 jsonp 就是通过 script 标签的 src 属性可以跨过同源策略限制，请求其他域的文件（数据），而传输数据时使用了通用的 json 格式，于是取名 jsonp;

jsonp 的取值原理

普通 xhr 对象请求数据是受同源策略限制的，而像 img、script、iframe等标签的 src 属性可以请求其他域的文件；

所以聪明的程序员想到，可以把数据编辑成 js 可以解析的格式放到 js 文件中，前端就可以动态加载数据了；

但这样显然存在安全问题，几乎任何人都可以随便读取数据，而且不能直接返回数据本体，这样是无法读取的，而且动态加载数据又必须异步加载才符合现代程序设计，所以最终决定：

使用前后台约定好的函数包装 json 格式的数据

同时也可以在后台做数据加密，前台解密，然后使用结束立刻销毁，提高安全性。

jsonp 简单实现

痛快贴代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 封装函数
function jsonp (opts) {
    var jsonpCb = opts.jsonpCB || 'jsonpCallBack';
    var url = opts.url ? opts.url + '?jsonpCallBack=' + jsonpCb : console.error('%cwe need a url for data!', 'font-size: 50px;');
    var script = document.createElement('script');
    script.setAttribute('src', url);
    window[jsonpCb] = function (data) {
        delete window[jsonpCb]; // 取到值后删除变量，以免长时间污染顶层作用域。
        opts.cb(data);
    }
    document.getElementsByTagName('head')[0].appendChild(script);
}
// 函数调用
jsonp({
    url: '/qqstr',
    cb: function (qqstr) {
        var lis = document.getElementsByClassName('qqstr');
        for (var i = 0; i < lis.length; i++) {
            lis[i].innerHTML = qqstr;
        }
    }
});