新手学跨域之Jsonp
Jsonp个人的理解是后端向前端传输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文件 // 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用户头像。 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的JsonpjQuery的Jsonp是封装在 先用原生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); 这里的函数名 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默默的给 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |