- 浏览: 340005 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
327764984:
CommonSql里不知道把PreparedStatment和 ...
Connection.setAutoCommit使用的注意事项 -
netwelfare:
文章讲解的不详细啊,很多东西没有讲解出来。看到这篇文章讲解的挺 ...
java字符串的拆分 lang.String.split -
iceage1980:
博主你好 我用了你这个代码 为什么总是在 if (this. ...
MD5 码 校 验 -
wisdomtl:
最后一段代码有写小的错误最后一个具体工厂的实现应该返回Cowb ...
JAVA设计模式之工厂模式 -
jateide:
网上随便转载的东西,自己都没有经过使用,好意思发出来,而且还不 ...
正则表达式中后向引用、零宽断言、负向零宽断言的解释用法
Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest
函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mashup 的驱动力,它可将来自多个地方的内容集成为单一 Web 应用程序。
不过,由于受到浏览器的限制,该方法不允许跨域通信。如果尝试从不同的域请求数据,会出现安全错误。如果能控制数据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误。但是,如果仅停留在自己的服务器上,Web 应用程序还有什么用处呢?如果需要从多个第三方服务器收集数据时,又该怎么办?
同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。这个浏览器策略很旧,从 Netscape Navigator 2.0 版本开始就存在。
克服该限制的一个相对简单的方法是让 Web 页面向它源自的 Web 服务器请求数据,并且让 Web 服务器像代理一样将请求转发给真正的第三方服务器。尽管该技术获得了普遍使用,但它是不可伸缩的。另一种方式是使用框架要素在当前 Web 页面中创建新区域,并且使用 GET
请求获取任何第三方资源。不过,获取资源后,框架中的内容会受到同源策略的限制。
克服该限制更理想方法是在 Web 页面中插入动态脚本元素,该页面源指向其他域中的服务 URL 并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的,因为同源策略不阻止动态脚本插入,并且将脚本看作是从提供 Web 页面的域上加载的。但如果该脚本尝试从另一个域上加载文档,就不会成功。幸运的是,通过添加 JavaScript Object Notation (JSON) 可以改进该技术。
JSON 是用于在浏览器和服务器之间交换信息的轻量级数据格式(与 XML 相比)。JOSON 依赖于 JavaScript 开发人员,因为它是 JavaScript 对象的字符串表示。例如,假设有一个含两个属性的 ticker 对象:symbol 和 price。这是在 JavaScript 中定义 ticker 对象的方式:
var ticker = {symbol: 'IBM', price: 91.42}; |
并且这是它的 JSON 表示方式:
{symbol: 'IBM', price: 91.42} |
从 参考资料 查找更多有关 JSON 和将其作为数据内部交换格式的信息。清单 1 定义了一个 JavaScript 函数,调用该函数时会显示 IBM 的股价。(我们没有详细介绍如何将该函数添加到 Web 页面)。
清单 1. 定义 showPrice 函数
function showPrice(data) { alert("Symbol: " + data.symbol + ", Price: " + data.price); } |
可以将 JSON 数据作为参数传递,以调用该函数:
showPrice({symbol: 'IBM', price: 91.42}); // alerts: Symbol: IBM, Price: 91.42 |
现在准备将这两个步骤包含到 Web 页面,如清单 2 所示。
清单 2. 在 Web 页面中包含 showPrice 函数和参数
<script type="text/javascript"> function showPrice(data) { alert("Symbol: " + data.symbol + ", Price: " + data.price); } </script> <script type="text/javascript">showPrice({symbol: 'IBM', price: 91.42});</script> |
加载页面后,应该看如图 1 所示的警告。
图 1. IBM ticker

至此,本文已展示了如何将静态 JSON 数据作为参数调用 JavaScript 函数。不过,通过在函数调用中动态包装 JSON 数据可以用动态数据调用函数,这是一种动态 JavaScript 插入的技术。要查看其效果,将下面一行放入名为 ticker.js 的独立 JavaScript 文件中。
showPrice({symbol: 'IBM', price: 91.42}); |
现在改变 Web 页面中的脚本,使其和清单 3 一样。
清单 3. 动态 JavaScript 插入代码
<script type="text/javascript"> // This is our function to be called with JSON data function showPrice(data) { alert("Symbol: " + data.symbol + ", Price: " + data.price); } var url = “ticker.js”; // URL of the external script // this shows dynamic script insertion var script = document.createElement('script'); script.setAttribute('src', url); // load the script document.getElementsByTagName('head')[0].appendChild(script); </script> |
在清单 3 所示的例子中,动态插入的 JavaScript 代码位于 ticker.js 文件中,它将真正的 JSON 数据作为参数调用 showPrice()
函数。
前面已经提到,同源策略不阻止将动态脚本元素插入文档中。也就是说,可以动态插入来自不同域的 JavaScript,并且这些域都携带 JSON 数据。这其实是真正的 JSONP(JSON with Padding):打包在函数调用中的 JSON 数据。注意,为了完成该操作,Web 页面必须在插入时具有已经定义好的回调函数,也就是我们例子中的 showPrice()
。
不过,所谓的 JSONP 服务(或 Remote JSON Service)是一种带有附加功能的 Web 服务,该功能支持在特定于用户的函数调用中打包返回的 JSON 数据。这种方法依赖于接受回调函数名作为请求参数的远程服务。然后该服务生成对该函数的调用,将 JSON 数据作为参数传递,在到达客户端时将其插入 Web 页面并开始执行。
从 1.2 版本开始,jQuery 拥有对 JSONP 回调的本地支持。如果指定了 JSONP 回调,就可以加载位于另一个域的 JSON 数据,回调的语法为:url?callback=?
。
jQuery 自动将 ? 替换为要调用的生成函数名。清单 4 显示了该代码。
清单 4. 使用 JSONP 回调
jQuery.getJSON(url+"&callback=?", function(data) { alert("Symbol: " + data.symbol + ", Price: " + data.price); }); |
为此,jQuery 将一个全局函数附加到插入脚本时需要调用的窗口对象。另外,jQuery 也能优化非跨域调用。如果向同一个域发出请求,jQuery 就将其转化为普通 Ajax 请求。
在上一个例子中,使用了静态文件(ticker.js)将 JavaScript 动态插入到 Web 页面中。尽管返回了 JSONP 回复,但它不允许您在 URL 中定义回调函数名。这不是 JSONP 服务。因此,如何才能将其转换为真正的 JSONP 服务呢?可使用的方法很多。这里我们将分别使用 PHP 和 Java 展示两个示例。
首先,假设您的服务在所请求的 URL 中接受了一个名为 callback
的参数。(参数名不重要,但是客户和服务器必须都同意该名称)。另外假设向服务发送的请求是这样的:
http://www.yourdomain.com/jsonp/ticker?symbol=IBM&callback=showPrice |
在这种情况下,symbol
是表示请求 ticker symbol 的请求参数,而 callback
是 Web 应用程序的回调函数的名称。使用清单 5 所示的代码可以通过 jQuery 的 JSONP 支持调用该服务。
清单 5. 调用回调服务
jQuery.getJSON("http://www.yourdomain.com/jsonp/ticker?symbol=IBM&callback=?", function(data) { alert("Symbol: " + data.symbol + ", Price: " + data.price); }); |
注意,我们使用 ?
作为回调函数名,而非真实的函数名。因为 jQuery 会用生成的函数名替换 ?
。所以您不用定义类似于 showPrice()
的函数。
清单 6 显示了用 PHP 实现的 JSONP 服务的一段代码。
清单 6. 用 PHP 实现的 JSONP 服务的代码片段
$jsonData = getDataAsJson($_GET['symbol']); echo $_GET['callback'] . '(' . $jsonData . ');'; // prints: jsonp1232617941775({"symbol" : "IBM", "price" : "91.42"}); |
清单 7 显示了具有同样功能的 Java™ Servlet 方法。
清单 7. 用 Java servlet 实现的 JSONP 服务
@Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String jsonData = getDataAsJson(req.getParameter("symbol")); String output = req.getParameter("callback") + "(" + jsonData + ");"; resp.setContentType("text/javascript"); PrintWriter out = resp.getWriter(); out.println(output); // prints: jsonp1232617941775({"symbol" : "IBM", "price" : "91.42"}); } |
那么,如果要构建 mashup 应该怎么办,是从第三方服务器收集内容,并在单一的 Web 页面中显示它们吗?答案很简单:您必须使用第三方 JSONP 服务。这种服务并不少。
知道如何使用 JSONP 之后,可以开始使用一些现成的 JSONP Web 服务来构建应用程序和 mashup。下面为接下来的开发项目做准备。(提示:您可以复制特定的 URL 并将其粘贴到浏览器的地址栏,以检查生成的 JSONP 响应)。
Digg API:来自 Digg 的头条新闻:
http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript &callback=? |
Geonames API:邮编的位置信息:
http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=? |
Flickr API:来自 Flickr 的最新猫图片:
http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any &format=json&jsoncallback=? |
Yahoo Local Search API:在邮编为 10504 的地区搜索比萨:
http://local.yahooapis.com/LocalSearchService/V3/localSearch?appid=YahooDemo&query=pizza &zip=10504&results=2&output=json&callback=? |
JSONP 是构建 mashup 的强大技术,但不幸的是,它并不是所有跨域通信需求的万灵药。它有一些缺陷,在提交开发资源之前必须认真考虑它们。第一,也是最重要的一点,没有关于 JSONP 调用的错误处理。如果动态脚本插入有效,就执行调用;如果无效,就静默失败。失败是没有任何提示的。例如,不能从服务器捕捉到 404 错误,也不能取消或重新开始请求。不过,等待一段时间还没有响应的话,就不用理它了。(未来的 jQuery 版本可能有终止 JSONP 请求的特性)。
JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应,而函数调用是由浏览器执行的,这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务,了解它能造成的威胁非常重要。(参见 参考资料 了解更多信息)。
在该系列的第一篇文章中,我们讲解了如何结合使用 JSONP 和 jQuery 快速构建强大的 mashup。主要主题包括:
- 浏览器同源策略的限制以及解决办法
- 作为一种有效的跨域通信技术,JSONP 能够绕过当前浏览器的同源策略限制
- JSONP 使 Web 应用程序开发人员能够快速构建 mashup
- 示例 JSONP 服务及其使用:Ticker 服务
本系列的下一篇文章将介绍 Yahoo! 查询语言(YQL),这种单端点 JSONP 服务允许您跨 Web 查询、过滤和合并数据。最后还使用 YQL 和 jQuery 构建 mashup 应用程序。
发表评论
-
js match 的简单用法 [转]
2014-06-05 14:41 1316/* js match 的用法 */var href,rs, ... -
JavaScript的replace方法与正则表达式结合应用讲解(转)
2013-09-27 17:02 926replace方法的语法是:stringObj.replac ... -
jquery内容过滤选择器、属性过滤选择器和jquery可见度过滤选择器(转)
2012-07-12 10:56 3471一、 jquery内容过滤选择器 根据内容进行选择 ... -
Jquery获取select,dropdownlist,checkbox 下拉列表框的值(转)
2012-07-11 16:18 1476jQuery获取Select选择的 ... -
Jquerr 中ajax和eche遍历等问题
2012-07-08 14:25 1492众所周知,jquery作为轻量级的js框架,已经应用到了很多方 ... -
利用jquery操作select下拉列表框(转)
2012-07-07 20:33 1121例: <select id=" ... -
HTML锚点(转)
2012-07-02 16:06 1425以前只是知道有锚点这么个东西,一直没有用到,昨天做毕设 ... -
jQuery.extend 函数详解(转)
2012-06-20 09:49 1065JQuery的extend扩展方法: ... -
HTML5实验:JavaScript模拟流体效果(转)
2012-06-15 19:57 1611把现实世界当中的物体模拟到计算机当中,一些简单的物理实 ... -
jQuery Datepicker 选择指定日期【转】
2012-05-21 14:17 3993要求是日期只能选择每个月的1号,其它都不能选择。 ... -
DatePicker基本使用方法 【转】
2012-05-08 11:01 4287一个不错的地址,用来DIY jQuery UI界面效果的 ... -
使用 JSONP 实现跨域通信,第 2 部分: 使用 JSONP、jQuery 和 Yahoo! 查询语言构建 mashup(转)
2012-03-27 16:58 1596简介 在本系列的第 1 ... -
keyCode charCode 详解
2012-03-27 11:33 1579键盘事件拥有两个属性, keyCode 和 CharCo ... -
JavaScript 键盘键值大集合
2012-03-27 10:01 4262JavaScript【keyCode】 JavaSc ... -
document.createElement()的用法 (转)
2012-03-16 11:09 1251分析代码时,发现自己的盲点——document.createE ... -
红薯 50+ 个 JavaScript & HTML5 框架以及相关工具(转)
2012-03-16 09:58 2398全堆栈框架和工具包 jQuery License: ... -
正则表达式中后向引用、零宽断言、负向零宽断言的解释用法
2012-03-08 15:02 2310正则表达式中后向引用 ... -
JavaScript正则表达式基础
2012-03-08 13:40 1060创建一个正则表达式 第一种方法: var reg = /pat ... -
javascript 正则表达式(转)
2012-03-08 13:28 989一 javascript正则表达式的基本知识 1 ... -
弹出层页面
2011-12-20 11:11 1281弹出层的一个小例子 <head> ...
相关推荐
跨域XSS(Cross-site scripting)是网络安全领域中的一个重要问题,尤其在构建混合应用(Mashups)时,它涉及到从不同提供者获取和整合数据或组件。本演讲由Mehmet Akin于2009年IBM公司进行,主要探讨了跨域问题及其...
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为...不过,由于受到浏览器的限制,该方法不允许跨域通信。如果尝试从不同的域请求数据,会出现安全错误。如果能控制数 据驻留的远程服务器并
当浏览器加载这个脚本时,服务器会返回一段JavaScript代码,形如`jsonpCallback({key1: value1, key2: value2, ...})`,其中的数据是JSON格式。这段代码被执行时,就会调用客户端预先定义的`jsonpCallback`函数,...
Mashup是一种将多个Web服务组合成一个新的Web应用程序的方式,能够快速构建新的应用程序。Mashup技术广泛应用于Web2.0时代的社会化媒体和无线应用中。 SOP(Same-Origin Policy)是一种Web浏览器的安全机制,规定了...
【Ajax 安全】是指确保基于Ajax技术构建的Web应用程序在提供高效、动态用户体验的同时,能够防御各种安全威胁。Ajax,即异步JavaScript和XML,是Web 2.0的核心技术,它允许用户与页面的交互与服务器通信分离,提高了...