新手学跨域之Jsonp

前端之家收集整理的这篇文章主要介绍了新手学跨域之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

原文链接:https://www.f2er.com/json/289928.html

猜你在找的Json相关文章