利用jsonp进行Javascript的跨域数据访问[转]
2011-08-08 14:16
537 查看
一、基础知识
1、什么是 JSON:JavaScript Object Notation (JSON) 是一种轻量级、基于文本、语言无关的数据交换格式。它是从 ECMAScript 语言标准衍生而来的。JSON为轻便的表示结构化数据,定义了一小套格式化规则。以下是一个 JSON 对象的例子:{
"Image": {
"Width": 800,
"Height": 600,
"Title": "View from 15th Floor",
"Thumbnail": {
"Url": "http://www.example.com/image/481989943",
"Height": 125,
"Width": "100"
},
"IDs": [116, 943, 234, 38793]
}
}
2、什么是 JSONP:JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成 Script tags 返回至客户端,通过 Javascript callback 的形式实现跨域访问(这仅仅是 JSONP 简单的实现形式)。
二、JSONP 的原理
首先说明一下,想要使用 JSONP 来进行跨域访问,必须服务器端支持,原因后面再解释。和 AJAX 一样,JSONP 实际上也是早已存在,只是说法相对比较新颖(貌似也出来很久了,额…),而且所有做网页开发肯定都用过。为什么这么说?应为它用到的只是所有 HTML 元素中一个简单的 script 元素。看到这是不是觉得越发奇怪了?没关系,继续看下去就会茅厕(塞)顿开的,嘿嘿~来看个例子吧:demo.html 文件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo</title>
<script type="text/javascript">
function say(words) {
alert(words);
}
</script>
</head>
<body>
<script type="text/javascript" src="demo.js"></script>
</body>
</html> demo.js 文件
say("Hello, everyone!");
运行 demo.html 文件后,是不是看到写着“Hello, everyone!”的警告框了?你可能会觉得这个例子很简单,没什么了不起的,甚至会在想:这和 JSONP 有关系吗?那么,我可以很肯定的告诉你:有关系!而且,这个例子实际上就是 JSONP 的原型!你也许会想到,JSONP 不是访问远程数据的吗?对,试想一下,如果 demo.js 文件在其它域的服务器上呢?结果会不会出现问题?我也可以很负责的告诉你:不会!你可以将上面例子中的 demo.js 更改为:http://demo.hpyer.cn/php/jsonp.php?callback=say 再试一下。
现在,聪明的你应该已经明白 JSONP 到底是怎么回事了,那么,再来解释一下本节开头第一句话吧。看过 demo.js 文件的内容,应该知道,其只是对一个函数(通常称之为:回调函数)的调用,而需要交互的数据则通过参数形势进行返回。所以通过 JSONP 访问的服务器需要提供一个可以设置回调函数名的接口,就像 http://demo.hpyer.cn/php/jsonp.php?callback=say 中的 callback,所以,综上所述 JSONP 是需要服务器端的支持的。附上 jsonp.php 的源码:
<?php
$type = isset($_GET['type']) ? $_GET['type'] : '';
$callback = isset($_GET['callback']) ? $_GET['callback'] : '';
$json = '';
if ($type == 'json') {
$json = '{
"Image": {
"Width": 800,
"Height": 600,
"Title": "View from 15th Floor",
"Thumbnail": {
"Url": "http://www.example.com/image/481989943",
"Height": 125,
"Width": "100"
},
"IDs": [116, 943, 234, 38793]
}
}';
} else {
$json = '"Hello, everyone!"';
}
if (!empty($callback)) {
$json = $callback . '(' . $json . ')';
}
echo $json;
?>
三、jQuery 中的应用
自 1.2 版本起,jQuery 加入了对 JSONP 的支持。我们可以很容易的利用 $.getJSON() 方法(或者其它基于 $.ajax() 的方法),来跨域加载 JSON 数据。来个例子吧:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function do_jsonp() {
$.getJSON("http://demo.hpyer.cn/php/jsonp.php?type=json&callback=?",
function(data) {
$('#result').val('data.Image.IDs: ' + data.Image.IDs);
});
}
</script>
</head>
<body>
<a href="javascript:do_jsonp();">Click me</a><br />
<textarea id="result" cols="50" rows="5"></textarea>
</body>
</html>
你可能注意到上面的例子中,url 被写成了 http://demo.hpyer.cn/php/jsonp.php?type=json&callback=?,需要说明的是,这个问号会 被 jQuery 自动替换为回调函数的函数名(如果是一个匿名函数,jQuery 会自动生成一个带时间戳的函数名)。
四、小结
通过本文的描述,相信你对于 JSONP 有了一个比较直观的了解,Hpyer 也相信,你也肯定可以举一反三的写出属于你自己的代码。其实,JSONP 的实现方法并不是只有回调函数一种,还有其它方式,例如将数据赋值给一个变量等。在 Web 2.0 的总体趋势之下,JS 显得越来越重要,并成了许多网页制作者所必学的一种脚本,所以,尽情的去体会 JS 带来的乐趣吧,Enjoy it!相关文章推荐
- 利用jquery 的jsonp 进行跨域访问
- AJAX利用Jsonp进行跨域对MVC项目访问
- 利用 jsonp 进行 Javascript 的跨域数据访问
- angular 使用$http.jsonp进行跨域访问以及修改目标JSON
- (转)在ASP.NET MVC3 中利用Jsonp跨域访问
- AngularJs---JSONP跨域访问数据传输
- 利用phoenix进行Hbase数据访问
- 通过jsonp来实现跨域访问获取数据!!!
- 如何利用JavaScript API访问导出FusionCharts图表数据
- JSONP解决跨域访问数据问题
- AngularJs---JSONP跨域访问数据传输
- jquery:利用jsonp跨域访问--转载
- javascript实现jsonp跨域访问
- jquery:利用jsonp跨域访问--转载
- JavaScript跨域访问之JSONP实现原理
- jsonp实现应用的跨域请求进行数据交互
- 【AngularJs】---JSONP跨域访问数据传输
- JavaScript用JSONP跨域请求数据实例详解
- 【前端学习笔记】原生Javascript中通过JSONP(前端常用方法)进行跨域
- 【AngularJs】---JSONP跨域访问数据传输