利用 jsonp 进行 Javascript 的跨域数据访问
|
http://chinazblz.blog.163.com/blog/static/93939173201042485426995/ 令附注iframe跨域调用传值：http://www.blueidea.com/tech/web/2009/6932.asp
一、基础知识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 元素。看到这是不是觉得越发奇怪了？没关系，继续看下去就会茅厕（塞）顿开的，嘿嘿～来看个例子吧：
<
!
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 再试一下。
<?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! 原文转自：http://hpyer.cn/visit-remote-data-with-jsonp-in-javascript.html （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |