什么是jsonp

先来看一个简单的例子

var script  = document.createElement('script');
script.src = 'localhost:80/test.php';
ducument.body.appendChild(script);

上面这段代码在body中创建了一个script标签,script的src属性指向本地的一个php脚本.这段代码执行后,在控制台可以看到请求了php脚本并返回了响应.提示未定义的函数foo.

什么鬼?我请求一个php脚本,结果提示函数foo未定义.发生了什么?

我们先来看看php脚本是怎么样的

<?php
header('Content-Type:application/javascript');
$json = json_encode(array('time'=>time()));

echo "foo({$json})";

我看到其实这个php脚本返回的是个字符串 foo(xxxxx);返回的mime是javascript.

我们理一下逻辑:
1.body中新增一个script标签后,请求php脚本;
2.php脚本返回了一个字符串,mime是javascript;
3.页面执行了php返回的脚本foo(xxx);
4.没有找到定义的foo函数,报错;

从上面可以知道,这里的script脚本是异步执行返回的.

现在我们把php脚本改为另外一个域的.例如www.test.loc/test.php;
结果和本地的php脚本一致.

那什么是jsonp?
其实就是通过script标签请求一个服务端的文件,通过这个文件返回的结果是一段js,作用是调用我们定义好的一个函数,从而将服务端想要给客户端发过去的数据发送给客户端

当然上面的调用函数foo显然是理想情况,即外部已经定义好了.
我们再来封装一下

function jsonp(url, params, callback) {
    var funName = 'callback_' + Data().now() + Math.random().toString().substr(2, 5);
    if (typeof params === 'object') {
        var tempArr = [];
        for (var key in params) {
            var value = params[key];
            tempArr.push(key + '=' + value)
        }
        params = tempArr.json('&');
    }

    var script = document.createElement('script');
    script.src = url + '?' + params + '&callback=' + funcName;
    document.body.appendChild(script);
    window[funcName] = function (data) {
        callback(data);
    }
}

jsonp('http://www.test.com/test.php', { id: 1 }, function (res) { console.log(res); })

这样就能请求jsonp了