JSONP是什么
一、JSONP的诞生
二、老板,来一斤栗子。 alert('我是远程文件'); 本地 <script type="text/javascript" src="跨域服务器/remote.js"></script>
【栗子二】 localHandler({"result":"我是远程js带来的数据"}); 本地 <script type="text/javascript"> var localHandler = function(data){ alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:' + data.result); }; </script> <script type="text/javascript" src="跨域服务器/remote.js"></script>
新问题出现了:让远程js知道它应该调用的本地函数叫什么名字呢?毕竟是jsonp的服务者都要面对很多服务对象,而这些服务对象各自的本地函数都不相同啊? 【栗子三】 跨域服务器 flightHandler({ "code":"CA1998","price": 1780,"tickets": 5 }); 本地 <script type="text/javascript"> // 得到航班信息查询结果后的回调函数 var flightHandler = function(data){ alert('你查询的航班结果是:票价 ' + data.price + ' 元,' + '余票 ' + data.tickets + ' 张。'); }; // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码) var url = "跨域服务器/flightResult.php?code=CA1998&callback=flightHandler"; // 创建script标签,设置其属性 var script = document.createElement('script'); script.setAttribute('src',url); // 把script标签加入head,此时调用开始 document.getElementsByTagName('head')[0].appendChild(script); </script>
三、那么服务器到底做了什么呢? 说到底,就是拼接字符串。 // 数据 $data = [ "name":"anonymous66","age":"18","like":"jianshu" ]; // 接收callback函数名称 $callback = $_GET['callback']; // 输出 echo $callback . "(" . json_encode($data) . ")"; 四、与AJAX的区别是什么? 五、结语本篇文章是对JSONP的原理扫盲,一般很多开发者会使用却不知道原理,这在学习和成长的路上不算好事。so,知道jsonp原理,你又可以加50块工资了。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |