加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

新手学跨域之Jsonp

发布时间:2020-12-16 19:10:47 所属栏目:百科 来源:网络整理
导读:jsonp iframe ● document.domain ● window.name ● location.hash ● navigator (IE6 bug) ● postMessage CORS ● XMLHttpRequest (modern browser) ● XDomainRequest (IE8+) 图像Ping (略) flash (略) Jsonp个人的理解是后端向前端传输JSON格式数据一种
  • 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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读