您的位置：首页 > Web前端 > JavaScript

初识jsonp

2016-09-29 16:16 330 查看

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的形式返回

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jsonp

相关文章推荐

新的分享

章节导航