新手学跨域之Jsonp

jsonp
iframe
● document.domain
● window.name
● location.hash
● navigator (IE6 bug)
● postMessage
CORS
● XMLHttpRequest (modern browser)
● XDomainRequest (IE8+)
图像Ping (略)
flash (略)

Jsonp个人的理解是后端向前端传输JSON格式数据一种方式，形如 callback({"name":"Joy","age":"22","gender":"male"})。
callback("a") 这种虽然包裹的数据不是JSON格式的，但应该也算吧？

Jsonp平时主要用在获取一些信息，比如通过公开api获取城市天气啊啥的。刚学的时候一头雾水，理解了就很简单了。

一步一步理解

1.简单的函数声明，调用。这里data为形参，'a'为实参

<script>
function callback(data) { console.log(data) }
callback('a'); // -> a
</script>

2.声明和调用分布在两个script标签里，这里就要注意顺序了，函数申明要在前

<script>
function callback(data) { console.log(data) }
</script>
<script>
callback('a');
</script>

3.函数调用在外部js文件

// foo.com的foo.html文件
<script>
function callback(data) { console.log(data) }
</script>
<script src="http://bar.com/call.js"></script>

// call.js文件
callback('a');

4.把这里外部js文件call.js替换成用PHP 输出试试

// foo.html文件
<script>
function callback(data) { console.log(data) }
</script>
<script src="http://bar.com/call.PHP"></script>

//call.PHP
<?PHP
echo 'callback("a")';
?>

5.加上参数，参数是看后端需要的是什么，如果不知道后端暴露的接口或者说是API，就没法交换数据

// foo.html文件
<script>
function callback(data) { console.log(data) }
</script>
<script src="http://bar.com/call.PHP?cb=callback&id=2"></script>

// call.PHP
<?PHP
$call = $_GET['cb'];
$id = $_GET['id'];
$arr = array('aaa','bbb','ccc');
echo $call.'("'. $arr[$id] .'")';
?>

上面就实现了跨域的数据交换，简单来说就是前端声明，后端调用。前端通过script把参数传给后端，后端把参数对应的数据当实参并构造成一个函数调用。如图

Jsonp也是这样，只不过他返回的是JSON数据。需要注意的是函数名并不总是自定义的，很多情况下都是后台写死的。

实例，通过Jsonp获取QQ用户头像。
api: http://ptlogin2.qq.com/getface?uin=qq号，可以看出他只要参数QQ号(还有其他参数，不过不是必须的这里就不写了)，随便写个QQ号http://ptlogin2.qq.com/getface?uin=123456，浏览器打开，可以看到输出了pt.setHeader({"123456":"http:\/\/q1.qlogo.cn\/g?b=qq&k=xyOnRe5ML3Aw96iaaQ1hh6w&s=40&t=1370250302"});，他这里的函数名已经写死了，所以我们的js代码函数名要按他给的写

var pt = {};
pt.setHeader = function (data) {
    // console.log(data);
    for (var i in data) {
        console.log(data[i]);
    }
}
// 动态创建script，这里QQ号我就不写动态的了
var s = document.createElement('script');
s.src = 'http://ptlogin2.qq.com/getface?uin=88888';
document.head.appendChild(s);

jQuery的Jsonp

jQuery的Jsonp是封装在ajax方法下面的，但和ajax没什么关系，实现方法和上面差不多
例如获取微博的搜索结果
api: http://s.weibo.com/ajax/jsonp/suggestion?_cb=函数名&key=关键字

先用原生js实现

function getResult(o) {
    console.log(o.data);
}
var s = document.createElement('script');
s.src = 'http://s.weibo.com/ajax/jsonp/suggestion?_cb=getResult&key=a';
document.head.appendChild(s);

这里的函数名getResult就可以自定义

jQuery实现

$.ajax({
    url: 'http://s.weibo.com/ajax/jsonp/suggestion?key=a',dataType: 'jsonp',jsonp: '_cb',success: function (o.data) {
        console.log(o.data)
    }
});

可以看到jQuery不用自己再声明一个命名函数，而是直接在succss里回调。通过请求可以看到，jQuery默默的给_cb传递了一个jQuery2xxx..的参数，而succss回调就是这个jQuery2xxx...的命名函数。当然如果要自定义也可以通过jsonpCallback设置，具体看jQuery的api

新手学跨域之Jsonp

一步一步理解

jQuery的Jsonp

相关文章