第三方JavaScript编程(中文版).docx
《第三方JavaScript编程(中文版).docx》由会员分享,可在线阅读,更多相关《第三方JavaScript编程(中文版).docx(300页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、第三方JavaScript编程(中文版)第1章第三方JavaScript介Z本章包括第三方JavaScript的定义 几个第三方应用实例实现一个简单的嵌入式微件 了解第三方开发的挑战第三方JavaScript是一种JavaScript编程模式,可以用来创立高度分布式的Web应 用程序。常规的Web应用需要通过一个特定的Web地址访问,而第三方JavaScript创立 的应用,只需要引入一些简单的JavaScript脚本就可以加载到任意页面上。你之前也许就曾遇到过第三方JavaScript。例如广告脚本,它可以在发布者网站上生 成、定向投放广告。用户也许并不喜欢广告脚本,但是它却能帮助网站发布者
2、获得收入并 维持网站的运转。成千上万的网站上都能看到广告的身影。事实上,几乎所有的广告都是 从单独的广告服务器加载的第三方脚本。开发者通过第三方JavaScript可以解决许多问题,广告脚本仅是其中的一个使用场景。 一些开发者用它们来创立独立的产品以满足网站发布者的需要。例如,位于旧金山的一个 初创公司(Disqus)所开发的第三方评论应用,为Web发布者提供实时评论系统。本书 的作者也是该公司的员工。还有一些开发者通过开发第三方JavaScript来扩展传统Web 应用,从而获得其他网站的用户。例如,Facebook和Twitter开发了数十个社交微件展 示在发布者的网站上。这些微件能够帮助
3、社交网站在它们应用的正常系统之外扩展用户的 规模。小公司也可以受益于第三方JavaScript。比方说,你是一家B2B ( business to business) Web应用的所有者,需要通过Web表单收集客户的信息。可能有一些潜在用 户想使用你的应用,但是他们会犹豫,因为这样会把自己的用户重定向到一个外部的网站。 通过第三方JavaScript,就可以让你的客户直接在他们自己的Web页面上加载你的应用, 从而解决他们所顾虑的重定向问题。第三方JavaScript并非外表看起来那么光鲜。写这些应用并非易事。在公开发布第三 方JavaScript代码之前你需要克服很多困难。值得庆幸的是,本书
4、会完整介绍第三方应用 的开发过程,足以让你明白如何解决这些问题。但是,当我们深入了解第三方JavaScript之前,需耍先了解一些基础知识。为了便于 理解,本章首先为第三方JavaScript下一个定义,其次了解一些公司在现实世界中的实现第4章与服务器通信本章包括同源策略(SOP) 基于SOP的跨域消息通信技术与SOP解决方案相关的安全性能 跨域资源共享(CORS)在前几章中,学会了如何在发布者的Web页面上分发、加载和渲染一个第三方 JavaScript应用。这是一个很好的开始,但到目前为止,你的应用程序只能访问到 JavaScript文件中嵌入的预定义数据。除非只处理少量固定的数据集,否那
5、么有些时候需要 从服务器动态的请求数据。如果你的应用程序正在收集数据,无论是被动或用户主动输入 的,可能都会希望把这些数据直接传到服务器上。让我们来回顾一下前两章讲到的Camera Stork微件。作为一个相机和相关配件的首 选在线商店,Camera Stork的库存量是相当巨大的,同时也是不断变化的。因此,它不 可能是嵌入在一个单独的JavaScript文件中。相反,当你知道发布者在尝试渲染哪个产品 时,需要向服务器发出独立请求以获取产品的最新数据。此外,当你开始通过微件获取用 户评级和评论时,也需要向服务器提交这些评级。想要做到这些的话,你的应用程序与服 务器之间必须有一个通信信道。在本章
6、和下一章中,我们分为两局部来讨论如何与服务器 创立通信。如果你是一位经验丰富的Web开发人员,那么你可能会觉得在浏览器中通过 JavaScript将数据发送到Web服务器上是一件非常简单的事情。当然,对于一个普通的 Web应用程序而言,你说得没错。但是,第三方应用程序发送数据请求时几乎都会涉及 跨域问题:从一个独立域名的Web页面发送到另一个独立域名的Web页面。例如,从 发布者的一个 Web页面(页面隶属publisher )向你的服务器(camerastork ) 发送请求获取产品数据。这些跨域请求会为第三方脚本编写者带来各种各样的麻烦。例如,不能使用 JavaScript中发起动态 请求
7、最直接的工具Xml Request。相反,不得不使用一些 性能、复杂度和浏览器支持程度不同的技巧和解决方案来解决这个问题。在本章中,我们将介绍一套初步的技术方案,告诉你如何把数据发送回你的服务器中。 主要包括:子域代理、JSONP、跨域资源共享规范(CORS)。每种方法都有不同的优缺 点:有些只能在子域下工作,另外一些是不能全方位支持 方法的,但是在特定的情况下,每一项技术都是非常有用的。实际上,第三方应用程序通常会通过合理的组合来使 用这些技术。下面,让我们看看为什么跨域请求很难,为什么不能使用现成的XML Request呢?4.1 AJAX和浏览器的同源策略假设你正在做一个普通的Web应用
8、程序,它可以通过一个独立域名访问。此应用程 序部署在受控环境中:你确切地知道你的代码在哪运行,并且所有的资源都来自同一个域。 可以使用XML Request对象以异步方式向服务器发送请求,并且可以在无需重新加载 页面的情况下反复发送数据,您可以用它来无缝更新Web应用程序的组件并提供流畅的 用户体验。这种体验正是第三方微件中所需要的。甚至可以说,在第三方的世界中,这个体验是 相当重要的。因为没有人原意安装一个会迫使自己重定向并离开原有页面的微件。那么为 什么不能再使用XML Request呢?AJAX (异步JavaScript和XML)是一套强大的方法。正因为它是如此强大,当恶意 的一方用不
9、受控制的方法使用它时,会变得非常危险。如果没有必要的安全措施,任何的 网站都能以你的名义进行潜在的破坏性行动。例如,如果在无限制的情况下运行,一个恶 意的网站可以加载你最喜爱的网页应用程序作为一个隐藏文件,获取你唯一的会话标识符, 然后使用它和你的数据来做可怕的事情。更糟糕的是,一个被攻击的应用程序是不会知道 那些彳亍为是在不知道的情况下引发的。您的电子邮件账户并不会遭遇这样的情况,如图 4.1所不。Web browser代码evil方法试图删除-所有的邮箱地址,但是w.GMAIL-deleteAll ();会被同源策略阻止Gmail inboxGmail通过名为“mail”的 iframe嵌
10、入图4.1同源策略可以阻止一个恶意网站访问iframe中的Gmail内容对我们来说幸运的是,浏览器厂商针对Web客户端制定并实现了最重要的安全概念: 同源策略(SOP) o在Netscape Navigator 2.0 (此版本也首次介绍了 JavaScript)中首次 介绍了 SOP,它的核心是确保不同源提供的文件之间是相互独立的。换句话说,只有当不 同的文件脚本是由相同的域、端口、 协议提供时,才没有特殊的限制并可以访问对 方的D0M方法和属性。根据同源策略,当脚本试图访问一个不同来源的文档中的方法和 属性时,便会抛出拒绝访问的异常。今天,所有浏览器针对XML Request. ifram
11、e和其他跨文档的信息交换方式都实 现了同源策略,多亏了 SOP的限制,在每个主流浏览器中,下面的例子都会抛出一个安var mail = document.createElement(iframe);mail.src = 1 :/gmail /; mail.style.display = none 1;document.body.appendchild(mail);mail.contentwindow.GMAIL.deleteAllMyMailPlease(); 全的异常,并执行失败。下面,我们将看看判定同源以及SOP和脚本加载的相关规那么。4.1.1 判定同源的规那么正如你所知的,不同源的文件
12、之间是无法通信的。但是,通常用什么规那么来确定两个 文件是否同源呢?规那么很简单:只有双方在协议、主机和端口号(Internet Explorer以外 的浏览器)都完全匹配的情况下,才可以被授权访问。其他情况下,都会禁止访问。表 4.1列出了针对 : example, com的同源策略检杳结果。表4.1针对的同源策略检查结果原始URL 结果原因 :example 成功协议,域名和端口号(默认为80端口)均相同 : example :8080 失败端 口 不同 s:example 失败协议( s)不同 : 失败域名不同不要忽略端口!有相当多的开发者(也包括我们自己)都忘记了 SOP也会检查并匹
13、配端口。例如,从thirdpartyjs 向thirdpartyjs :8080发出的请求将会失败。当请 求被SOP拒绝时,调试将会很艰难,因为大多数浏览器不会给你提供任何有用的信息。 所以,请不要忘记!如表4.1所示,没有任何恶意方可以这么做,除非他们在有相同的域、协议和端口作 为目标文件的网页上执行自己的代码。这是个好消息,但是在安全感袭来之前,千万不要 忘记现代浏览器包含了许多不同的组件,并且不是所有组件都遵守同源策略。例如, Adobe的Flash浏览器插件不遵守SOP,不管同源与否,都允许不同文档的Flash对象进行 通信。4.1.2 同源策略和脚本加载这时你或许会想:“等一下,整个
14、第2章中我们不都是在学习如何在发布者网站 (publisher )上加载外部JavaScript文件(隶属于camerastork )吗?那么根据 同源策略,它会不会被认定为是两个不同源之间的 请求而被拒绝呢?”同源策略恰恰单独有一个很重要的例外:HTML脚本元素会被免于SOP检查。对于 现代网络来说,这个例外是至关重要的,因为它允许网站加载其他来源的JavaScript。这 有很多的用途,比方允许网站从高性能的内容分发网络(CDNs)加载JavaScript资源。 作为一个第三方JavaScript应用程序开发者,它也提供了一种分发应用程序代码的方法。 否那么,发布者就不能引入脚本文件,在本
15、书中我们也不会有很多内容来写。还有一点非常重要:即使你的代码加载自不同的源,并且代码在发布者的网站中执行, 同样要受该文档中SOP的限制。这意味着,在发布者页面中执彳工的JavaScript代码不能 向camerastork 发起Xml Request请求,如图4.2所示。但它可以加载更多的 JavaScript文件,因为脚本元素是不受SOP限制的。PublisherpageWeb浏览器下载HTML页面publisher Publisherpage下载第三方脚本。由于同源策略 不限制script标签,因此可行widget Web浏览器Third-partycode executingin pu
16、blishercontext从发布者页面无法发送 XmL Request 请求, 浏览器将抛出异出*widget 图4.2 Xml Requests会受到同源策略的限制,而脚本元素的请求不会被限制同源策略是一个了不起的安全功能,但当你需要在不同域之间合法传送数据时,它就 变成了一个实实在在的阻力。例如,使用Xml Request向Camera Stork服务器请求数 据。如果第三方JavaScript应用程序开发人员有一个定义良好的、安全的跨域通信方法会 很不错。幸运的是,就在不久前,浏览器厂商看到了这个需求并开发了 API,它允许不同 来源的页面,以受控的方式彼此进行通信。在本章中我们将会介
17、绍这些方法中的一个一一 跨域资源共享(CORS)山。正如大多数新的浏览器功能一样,它们并不完全被所有的浏览器所支持,而CORS也 不例外。正因为如此,你需要寻找一些技巧和解决方案。接下来的几局部,我们将介绍两 个解决方法,可以用来帮你绕过同源策略,分别为:带填充的JSON (JSONP)和子域名 代理。在本章结尾,我们将深入学习CORS,尽管只有有限的浏览器支持,但是它仍旧是 标准的,而且是最正确的实现跨域通信方式。4.2 带填充的JSON (JSONP)带填充的JSON,或者简称为JSONP,是一种可以在JavaScript中绕过同源策略,并 发起跨域 请求的使用模式,可以启动JavaScr
18、ipt的跨域 请求。JSONP 一词早 在2005年就有了,在当时Bob Ippolito写的一篇博客提出:“一个无关标准,使用脚本 标签来跨域获取数据的新技术。”从那以后,就被所有互联网的开发者广泛运用。流行的 JavaScript库(如jQuery),都有内置JSONP支持,许多流行的Web服务API (如 Twitter谷歌,当然也包括Disqus)都支持JSONP响应。在本节中,我们将告诉你如何使用JSONP规避SOP及处理类似AJAX的跨域请求。 我们还会介绍一些JSONP的限制和缺点。4.2.1 通过脚本元素加载JSON正如你了解到的,同源策略有一个显著的例外:HTML脚本元素是可
19、以规避SOP检 查的。那就意味着,第三方应用程序代码是可以通过加载外部JavaScript文件的方式来向 其他源发出 请求的。JSONP正是利用了这个例外情况实现跨域数据加载的。要想知道JSONP是怎样工作的,就先来看一个例子:使用Xml Request请求一个 普通的 JSON 文件。假设你使用 Xml Request 请求“ :/thirdpartyis /infojson, 它会返回一个JSON文档,其中包含了有关本书的一些关键信息。(title: Third-party JavaScriptH.authorsH : Anton1* z Ben z11 publisher : Manni
20、ng 浏览器接收到该响应并作为一个字符串处理。这个字符串必须转换为JavaScript对象 才可以使用。这个转换可以用浏览器的原生JSON.parse函数来完成,或者当旧版本浏览 器的原生JSON对象不可用时,也可以使用其他的JSON库。当然,由于同源策略的限制,XML Request只能在同一个域中才能使用。但正如我们前面所提到的,您可以使用script,元素请求相同的URL,从而可以避过SOP检查。通过script,元素请求资源,当文件加载完成时,浏览器会把JSON响应当作 JavaScript解析并执行。那么你就可以自由地使用响应的数据了吗?当然也不完全是。首先,尽管这个响应是有效的JS
21、ON,看上去也非常像一个普通的JavaScript对象, 但它实际上是无效的JavaScript。当浏览器试图将响应作为JavaScript执行时,就会因语 法错误而终止。这是因为JavaScript语法解释器解析到左花括号时,会认为是块语句的开 始,并认为紧随其后的是一个或多个有效的JavaScript语句。假设这个响应是一个有效的JavaScript对象,并且浏览器解析执行没有遇到错误。由 于该对象未被存储,也没有赋值给一个变量,或者作为参数传递给一个函数,浏览器会忽 略它。在加载脚本元素的过程中,没有方法获得实际的响应正文,因此也没有其他方式可 以获取JSON的内容。获取JSON输出如果
22、服务器不是直接返回一个JSON对象,而是通过返回一个JavaScript语句,将该 对象巧妙地存储会怎样呢?例如,假设有一个外部URL, :thirdpartyis /info.js 工不同的文件扩展名一一.js而不是Json),返回内容如下所示。var j sonResponse =, title : 1 Third-party JavaScript,authors: Anton, Ben, publisher : Manning);当该文件加载完毕以后,就可以通过全局变量jsonResponse访问这个JSON对象了。 当该变量包含所请求的数据时,你可以使用script,元素的load事件
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第三 JavaScript 编程 中文版
限制150内