地狱猫

jsonp的原理与实现

jsonp是一种跨域通信的手段，它的原理其实很简单：

  1. 首先是利用script标签的src属性来实现跨域。
  2. 通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。
  3. 由于使用script标签的src属性，因此只支持get方法

下面详细讲讲如何实现jsonp。

实现流程

  1. 设定一个script标签
<script src="http://jsonp.js?callback=xxx"></script>
1
  1. callback定义了一个函数名，而远程服务端通过调用指定的函数并传入参数来实现传递参数，将fn(response)传递回客户端
$callback = !empty($_GET['callback']) ? $_GET['callback'] : 'callback';
echo $callback.'(.json_encode($data).)';
1
2
  1. 客户端接收到返回的js脚本，开始解析和执行fn(response)

jsonp简单实现

一个简单的jsonp实现，其实就是拼接url，然后将动态添加一个script元素到头部。

function jsonp(req){
  var script = document.createElement('script');
  var url = req.url + '?callback=' + req.callback.name;
  script.src = url;
  document.getElementsByTagName('head')[0].appendChild(script); 
}
1
2
3
4
5
6

前端js示例

function hello(res){
  alert('hello ' + res.data);
}
jsonp({
  url : '',
  callback : hello 
});
1
2
3
4
5
6
7

服务器端代码

var http = require('http');
var urllib = require('url');
var port = 8080;
var data = {'data':'world'};
http.createServer(function(req,res){
    var params = urllib.parse(req.url,true);
    if(params.query.callback){
      console.log(params.query.callback);
      //jsonp
      var str = params.query.callback + '(' + JSON.stringify(data) + ')';
      res.end(str);
    } else {
      res.end();
    }
    
}).listen(port,function(){
  console.log('jsonp server is on');
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

然而，这个实现虽然简单，但有一些不足的地方：

  1. 我们传递的回调必须是一个全局方法，我们都知道要尽量减少全局的方法。
  2. 需要加入一些参数校验，确保接口可以正常执行。

可靠的jsonp实现

(function (global) {
    var id = 0,
        container = document.getElementsByTagName("head")[0];
    function jsonp(options) {
        if(!options || !options.url) return;
        var scriptNode = document.createElement("script"),
            data = options.data || {},
            url = options.url,
            callback = options.callback,
            fnName = "jsonp" + id++;
        // 添加回调函数
        data["callback"] = fnName;
        // 拼接url
        var params = [];
        for (var key in data) {
            params.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
        }
        url = url.indexOf("?") > 0 ? (url + "&") : (url + "?");
        url += params.join("&");
        scriptNode.src = url;
        // 传递的是一个匿名的回调函数，要执行的话，暴露为一个全局方法
        global[fnName] = function (ret) {
            callback && callback(ret);
            container.removeChild(scriptNode);
            delete global[fnName];
        }
        // 出错处理
        scriptNode.onerror = function () {
            callback && callback({error:"error"});
            container.removeChild(scriptNode);
            global[fnName] && delete global[fnName];
        }
        scriptNode.type = "text/javascript";
        container.appendChild(scriptNode)
    }
    global.jsonp = jsonp;
})(this);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

使用示例

jsonp({
    url : "www.example.com",
    data : {id : 1},
    callback : function (ret) {
        console.log(ret);
    }
});
1
2
3
4
5
6
7

← cookie、session、localstorage、sessionStorage→