- jsonp
-
iframe
● document.domain
● window.name
● location.hash
● navigator (IE6 bug)
● postMessage -
CORS
● XMLHttpRequest (modern browser)
● XDomainRequest (IE8+) - 图像Ping (略)
- flash (略)
-
代理/转发
● http-server
● webpack-dev-server
● nginx
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/getfac...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..._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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。