ajax详解_动力节点Java学院整理
在过去几年,JavaScript已从让人事后才想起的偶然对象变成最重要的Web语言。如果要指出一个推动这项技术显著进步的因素,那就是基于Ajax的应用程序开发的出现。
开发关于该主题的技术
简言之,Ajax 是一种开发技术,支持网站或应用程序,使用实时数据更新界面,无需页面刷新。该功能创建了一种更为流畅且更具桌面风格的用户体验。
Ajax简史
Ajax的发展历史类似于其他许多一夜成名的技术。尽管Ajax似乎不知从何而来,但实际上,它已经存在很长一段时间了。多年的努力使其遍布Web,在Ajax旗帜的带领下创建工具和模式。纵观最初网络泡沫的DHTML时代,以及网络公司破产后的黑暗年代,世界各地的开发人员解禁了JavaScript的超能力,将这个崭新的、令人激动的应用程序模式引人Web。
XMLHttpRequest
最早最重要的Ajax谜题是 XMLHttpRequest (XHR)API。XHR是一种用于在Web浏览器和Web服务器间传输数据消息的JavaScriptAPI。它支持浏览器使用HTTP POST(将数据传到服务器)或 GET 请求(从后台服务器访问数据)。该API是大多数Ajax交互的核心,也是现代Web开发的一项基本技术。
它也是Microsoft®InternetExplorer®团队贡献给Internet的最好礼物。
这是真的。早在2000年,XHR最先出现于IE5中。最初是由AlexHopmann编写的Microsoft®ActiveX®控件,创建XHR是为了处理MicrosoftOutlook®WebAccess,旨在解决高级(当时)前端接口和MicrosoftExchangeServer间的交互。
尽管Microsoft的软件包不完全算是“出身贫贱”,但XHR的发展远远超出了最初产品的范围,后来在各个主要浏览器中得以实现,甚至作为一种W3C标准被采用。
先锋
除了Microsoft之外,还有其他一些企业开始进军原型Ajax领域。许多企业都开始尝试使用这些技术,其中有两个特别值得一提—一个是因为它是一个有趣且经常引用的Ajax开发脚注,另一个是因为它是真正将这些技术大众化的Internet巨头。
Oddpost
Oddpost是2002年推出的基于Web的高级邮件客户端。它利用许多目前人们所熟知的模式。在设计和交互方面,人们会想起桌面邮件客户端。在系统内部,Oddpost使用开发人员称为 DataPacks 的概念将小块数据从服务器传输到浏览器。这将带来一种全新体验。
Oddpost最后被Yahoo!收购,成为Yahoo!Mail修订版的基础。
GoogleMaps、GoogleSuggest、Gmail以及一篇重要文章
真正的变化开始于几年后的Gmail、GoogleSuggest和GoogleMaps服务。这三项Ajax技术的使用使得Web开发界沸腾起来。它的响应能力和交互性对公众而言是全新的。新的Google应用程序很快引起了轰动。
虽然了解它的人并不是很多,但Web开发界对此反响非常剧烈。当时,人们知道在Web应用程序开发中出现了一些新的、激动人心的内容。但在很长一段时期内,这个“内容”一度模糊不清。
人们需要的是一篇让该内容明朗化的文章。
2005年2月18日,AdaptivePath的共同创立者兼总裁JesseJamesGarrett撰写了一篇题为“Ajax:ANewApproachtoWebApplications”的文章。在这篇文章中,他介绍了Web应用程序设计开发的趋势,诸如Gmail和GoogleMaps这类应用程序人们一直都在使用。他称这种趋势为“可能引发Web开发的根本性变革。”
他还为这种模式命名,这是一个重要的时刻,因为从这一刻起人们开始重点关注这一新趋势,每个人(甚至是非专业人员)在谈及Web开发界近期最新变化时都会提到它。在本文中,他是这样介绍Ajax这种技术的:
定义Ajax
Ajax不是一种技术。实际上是几种技术,每种技术都各有其特色,这些技术以全新强大方式融合在一起。Ajax包含:
- 使用XHTML和CSS基于标准的呈现
- 使用文档对象模型的动态显示和交互
- 使用XML和XSLT的数据交换和操作
- 使用XMLHttpRequest的异步数据检索
- 将它们绑定到一起的JavaScript
虽然这个技术说明从某种程度上讲有些过时了,但基本模式依然是完整的:HTML和CSS呈现数据和样式,DOM和相关方法支持页面实时更新,XHR支持与服务器通信,JavaScript安排整体显示。
本文的总体影响比较大。密集的大肆宣传与亟待开发的创造力和能源相碰撞,掀起了一场革命,这实属难得一见。由于Ajax被世界范围的新一代创业企业所采用,它迅速走向Web开发范式的前沿。Ajax从一个寻求市场策略的模糊趋势一跃成为现代Web设计的开发的关键组成部分。
库
基于Ajax开发的一个关键驱动因素是几个全功能JavaScript库的演变和改进。除了经验丰富的JavaScript开发人员,很少有人能够真正理解Ajax底层技术。因此,即使在DHTML时代,虽然研究出了大部分浏览器交互和动画来应对琐碎的超额,但数量有限的几个经验丰富的JavaScript工程师导致基于Ajax的站点需求和人才(他们可以从零开始编写这样一个界面)供应之间的差距的进一步扩大。通过提供随时可用的交互和动画,减少跨浏览器差异和改进核心JavaScriptAPI缺点的实现,Prototype、Dojo和jQuery这类库有助于大规模地填补这一空白。
异步JavaScript以及更多JavaScript(对象表示法)
从原始post时代到现代,Ajax领域的最大改变是引入了JSON,JSON是一种基于JavaScript的数据传输。提供更小的文件和更便利的原生JavaScript访问(与XML使用的笨重的基于DOM的方法和属性截然相反),JSON很快就被开发人员用于进行数据传输。现在JSON已列入近期完成的ECMAScript规范的第5版。
JSON+Padding
原始JSON提议的一个显著增强是JSON+Padding(JSONP)。正如您所看到的,XMLHttpRequest对象有一个严格的安全模型,只支持使用与请求页面相同的域名和协议进行通信。JSONP在这个跨域限制上创建了一种更为灵活的方法,将JSON响应包装到一个用户定义或系统提供的回调函数中。将JSON脚本添加到文档之后,该方法将会提供即时数据访问。该模式现在很常见,对于许多较大的Web服务,可以采用该实践来支持混搭应用和其他内容联合。
尽管JSONP非常流行,但它有一个明显的便于恶意代码入侵的漏洞。因为来自第三方的脚本标记注入允许所有内容在主机页面上运行,所以,在数据提供者受到威胁时,或者主机页面没有留意插入页面的资源时,恶意入侵潜能将会令人想象。
现在,您已经对Ajax历史有所了解,接下来我们将开始探讨将魔法变成现实的技术。尽管,一般的JavaScriptAPI书籍在图书馆中随处可见,但即使对于经验丰富的开发人员,了解底层工作原理仍然是具有启发意义的。
XMLHttpRequestAPI和特性
尽管可以使用其他技术从服务器中返回数据,但是XHR仍然是大多数Ajax交互的核心。XHR交互由两部分组成:请求和响应。下面我们将逐个介绍。
安全模型
正如上面所提到的,原始 XMLHttpRequest 对象有一个严格的安全模型。这个同源策略只 允许使用与请求页面相同的主机、协议和端口进行通信。这意味着不同域(example.com和example2.com)、不同主机(my.example.com和www.example.com)、不同协议(http://example.com和https://example.com)之间的通信是禁止的,这会产生错误消息。
随着第二版XHR对象的开发,新的跨域请求协议工作将在W3C中完成,大量实现工作由浏览器供应商完成,针对跨域请求的机制目前仅在InternetExplorer8+、MozillaFirefox3.5+、AppleSafari4+以及GoogleChrome中提供。尽管发展已经放缓,但仍在请求中发送了一个特定“Origin”报头:
Origin:http://example.com
并将服务器配置为发送回一个匹配的“Access-Control-Allow-Origin”报头:
Access-Control-Allow-Origin::http://example.com
现在,可以使用XHR对象跨域进行双向通信了。
请求
请求端有4种方法:
- open() 发起服务器连接。可以带参数:
- method。将要使用的HTTP方法(可以是 POST 或者 GET)
- url。请求的URL
- async。 可选布尔参数,表明请求是否异步(该参数的默认值为Ture)
- user。一个可选用户名,供认证使用
- password。一个可选密码,供认证使用
- setRequestHeader() 设置请求报头,带有两个参数:报头及其相关值
- send() 发送请求。该方法带有一个可选参数,包含 POST 请求的正文
- abort() 中止请求
响应
响应也有几个属性和方法:
- status。请求的标准HTTP状态(例如,成功请求将返回 200)
- statusText。包括Web服务器返回的完整响应字符串,其中包括响应文本(例如,304NotModified)
- getResponseHeader()。返回特定报头内容;请求报头名称是其惟一参数
- getAllResponseHeaders()。返回所有响应报头的文本
- responseText。响应文本的字符串表示
- responseXML。响应文本的XML表示,一个包含DOM和所有相关DOM方法的文档片段
readyState
实例化完成后,XMLHttpRequest 对象有5种状态,使用以下值表示:
- 0:UNSENT。表示对象已创建
- 1:OPENED。表示 open() 方法已成功调用
- 2:HEADERS_RECEIVED。表示来自请求的报头已收到
- 3:LOADING。表示响应报头已下载
- 4:DONE。表示请求完成,但是并没有指出请求是否成功或返回预期值(查询响应和标准HTTP报头来估量请求的健康状况)
一个通用JavaScript示例
在我们进一步介绍流行库之前,先通过几个原始的JavaScript示例来了解正在运用的核心技术。
样例HTML文档
SimpleAjaxExample SimpleAjaxExample
Clickhere andcontentwillbeappendedafterthisparagraph