初识jsonp

前端之家收集整理的这篇文章主要介绍了初识jsonp前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
1.这个理解为一种协议,传递的数据格式是json 2.浏览器跨域无法访问,会报安全错误,但是想<script src=>,<img src=> 这些标签加载回来的js和图片,则可以进行从其他域名获取到 3.跟ajax不同,ajax只能访问当前域名(不包括服务器使用代理等情况) 4.示例1 假如当前域名 www.current.com <head> <script type="text/javascript" src="http://bankServer.com/getBankCard.js"></script> </head> 远程的getBankCard.js的内容alert("从远程获取bankCard成功"); 则会弹出窗口 示例2,执行本地的js方法 <head> <script type="text/javascript"> var showBank = function(data){ alert('我是本地函数:' + data.bankName); }; </script> <script type="text/javascript" src="http://bankServer.com/getBankCard.js"></script> </head> getBankCard.js内容如下 showBank( { "userId": 1,"bankUserName": "隔壁老王","bankName": "XX银行" }); 弹出窗口且有打印 示例3,动态传递回调方法名 <head> <script type="text/javascript"> // 得到航班信息查询结果后的回调函数 var showBank = function(data){ alert('我是本地函数:' + data.bankName); }; // 提供jsonp服务的URL地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码) // 请求参数部分,callback=showBank,key不一定非得是callback,跟后台服务能对应上就行 var url = "http://bankServer.com/api/getBankCard?bindId=2&callback=showBank"; // 创建script标签,设置其属性 var script = document.createElement('script'); script.setAttribute('src',url); // 把script标签加入head,此时调用开始 document.getElementsByTagName('head')[0].appendChild(script); </script> </head> 这个请求就是把查到的结果包装成上面示例2的形式返回

猜你在找的Json相关文章