引言 ： 学完 JSON ，我们了解了其基本语法格式，如何通过JavaScript进行 数据解析，浏览器如何解析JSON 数据，我们简单的会使用JSON 进行数据的传输与使用，那今天我们就来看一下 什么是 JSONP 把。
1.1 简介
Jsonp （JSON with Padding）：json 的一种“ 使用模式 ” ，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
1.1.1 为啥需要从不同的域访问数据需要一个特殊的技术（JSONP）呢？
因为 同源策略
同源策略 ： 由Netscape 提出的一个著名的安全策略，所有支持 JavaScript 的浏览器 都会使用这个策略。
1.2 产生
1. Ajax 直接请求普通文件存在跨域无权访问问题，无论是静态页面，动态网页，web服务等，只要是跨域请求，都无法实现。
2. 但是 web 页面上调用 JavaScript 文件时不受跨域的影响（若拥有 src img 等，也拥有跨域的能力）
3. 那么 跨域访问就只有一种可能，就是在远程服务器上设法把数据装进 js 格式的文件中，供客户端调用和进一步处理。
4. web 客户端通过与调用脚本一样的方式，来调用跨域服务器上动态生成的 js 格式文件（一般以 json 为后缀），显而易见，服务器之所以要动态生成JSON 文件，目的就在于把客户端需要的数据装入进去。
5. 客户端对 JSON 文件调用成功之后，也就获得了自己所需要的数据，剩下的就是按照自己需求进行处理和展示，此方式获取远程数据虽与 Ajax 相似，但并不一样。
这时，一种非正式的传输协议 JSONP 就产生啦， 其主要时通过 用户传递一个callback 参数给服务端，然后服务端返回数据时会将callback 参数作为函数名来包裹住JSON 数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
1.3 实例
1)
远程服务器remoteserver.com根目录下有个remote.js文件代码如下：
alert('我是远程文件');
本地服务器localserver.com下有个jsonp.html页面代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="http://remoteserver.com/remote.js"></script> </head> <body> </body> </html>
2)
现在我们在jsonp.html页面定义一个函数，然后在远程remote.js中传入数据进行调用。
jsonp.html页面代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var localHandler = function(data){
alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result);
};
</script>
<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>
</body>
</html>remote.js文件代码如下：
localHandler({"result":"我是远程js带来的数据"});
3) 动态实现调用本地函数
通过在url 中传递一个 code 参数，告诉服务器 航班信息，在callback 参数 告诉服务器，本地回调函数为 flightHander ，请把查询结果传入这个函数中调用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
// 得到航班信息查询结果后的回调函数
var flightHandler = function(data){
alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
};
// 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
// 创建script标签，设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head，此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>
flightHandler({ "code": "CA1998", "price": 1780, "tickets": 5 });
扫一扫
1418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
