AJAX的全称为“Asynchronous
ECMAScript and
XML”(异步JavaScript和XML),是指一种创建交互式Web应用的网页开发的技术,它综合利用了已经存在的各种技术,包括:
HTML或XHTML、
层叠样式表、JavaScript、DOM、XML、
XSLT、以及最重要的XMLHttpRequest对象,从而生成一种全新的应用。它可以与服务器通信、交换数据并更新页面,而无需刷新页面。
AJAX最早应用于1998年,由
微软的小组写的一个组件使得AJAX技术成功应用于商业应用程序,但是当时并没有AJAX这个概念的产生。后来于2005年被谷歌公司用于开发交互式应用程序而被广泛应用,同年,Jesse James Garrett在一篇文章中首次提出了AJAX这个名词,并且阐明了所包含的技术和应用定位,AJAX技术的交互式特性使得其成为Web2.0的核心技术。
AJAX技术是使用客户端脚本与Web服务器交换数据的Web应用开发方法,使得Web的应用程序像桌面应用程序一样拥有直接、高可用、更丰富、更动态的Web用户界面。而AJAX的技术融合性使得其有利也有弊,在提供高效率的同时也带来了一些安全性的问题。
发展历程
最初的Web页面都是静态的,这个阶段的Web应用程序不能与客户产生任何互动,为满足客户需求,动态的脚本语言开始出现,如JSP、ASP和
PHP等。1995年,
网景添加了一项称为LiveScript(也就是后来的
ECMAScript)的功能,该功能允许人们将小脚本放在网页中,以便可以在下载后继续执行操作。LiveScript更名为JavaScript后,开启了动态
HTML技术的发展,丰富了页面和交互能力。在后来
Mozilla Application Suite的早期版本中,Netscape展示了一种新的技术,使用一段
XML数据通过JavaScript呈现给客户,这意味着渲染可以即实的更改了。
AJAX技术在1998年前后得到应用。
微软为其
Outlook Web Access 2000 版本创建了 XMLHTTP ActiveX 对象,意在为Exchange Server提供基于Web的访问。部分观察家认为,Outlook Web Access是第一个应用了AJAX技术的成功的商业应用程序。1999年3月,Microsoft在Internet Explorer 5.0中发布了XMLHttpRequest 的原始形式,这允许浏览器向服务器发出 HTTP 请求,并在后台以 XML 格式取回一些数据,意味着可以在页面上刷新数据,而无需完全重新加载。
AJAX被广泛应用是于2005年。2005年2月,Jesse James Garrett在《Ajax: A New Approach to Web Applications》一文中首次提出了AJAX这个名词,并将其应用于一种新的Web开发方法。Garrett的文章中提出了一个理念:使用AJAX消除Web应用程序和桌面应用程序在系统的
人机交互方面存在的差距,他将
ECMAScript、XHTML、
层叠样式表、DOM、
XMLHttpRequest、XML和XSTL综合运用的技术成为AJAX。而用户互动是Web 2.0的典型功能,所以AJAX成为了Web 2.0中的核心技术。同年,
谷歌在其交互式应用程序(如谷歌地图、谷歌学术搜索等)中使用AJAX技术,实现了快速的地图加载和交互式操作,AJAX技术开始被广泛应用到程序开发中。
随着AJAX技术的广泛应用,各种前端框架和库开始涌现。2006年,John Resig发布了jQuery框架,其中封装了很多方法让开发人员能够快速地实现动画,并且能够简洁地发送AJAX,简化了AJAX的使用。后来AJAX概念的进一步发展,不再局限于使用
XML作为
数据交换,而是开始支持使用其他格式,比如JSON。它是一种轻量级的数据交换格式,相较于XML而言,它的结构简洁,解析起来更快;占用的存储空间少, 网络传输也更快。
2012年,W3C组织发布了
HTML5规范,包括了新的Web API,支持AJAX的文件上传,进一步划分清楚了HTML和
层叠样式表在AJAX应用中的职责,随着Web 3.0时代的到来,互联网朝着移动化的方向发展,AJAX技术因能够解决移动应用的很多问题,逐渐应用于移动端的开发,包括网络连接间断、
带宽限制、补全输入、应用程序移植于无障碍发布等问题。
工作原理
AJAX提供了同步和异步两种类型的请求,其中同步请求将阻塞
ECMAScript 代码的执行,直到响应到达为止。异步请求可以允许网站提供不间断的服务,
异步通信机制原理是不等待服务器生成响应,JavaScript便继续执行其他的工作,使页面在处理响应时具有响应性,这一步通过调用open方法中设置的async参数来实现。这种异步交互的方式消除了同步交互方式中出现的“处理-\u003e等待-\u003e处理-\u003e等待”缺陷。发送请求时,AJAX把JavaScript技术和XMLHttpRequest对象放在Web表单和服务器之间,当用户填写表单时,数据发送给一些JavaScript代码而不是直接发送给服务器,JavaScript代码捕获表单数据并向服务器发出请求。
实质上AJAX遵循了Request/Server模式,首先创建XMLHttpRequest对象,然后通过对这个对象进行各种操作来完成和服务器的通信。成功创建XMLHttpRequest对象之后,使用
ECMAScript代码向服务器发送请求,服务器接收到用户的请求之后,可以根据请求内容进行相应的操作,然后把数据以合适的格式返回给客户端。
当服务器结束对用户请求的处理以后,会把处理的结果返回给用户,在客户端对返回的内容进行处理,然后根据其处理结果对页面进行调整,到这一步,客户端对服务器的
异步通信就完成了。服务器用
XML文档返回逻辑处理的结果,在客户端可以通过XMLHttpRequest对象的responseXML属性取出服务器返回的相应文档。然后在
ECMAScript中,可以用DOM方式分析这个XML文档,从而取出用户需要的内容。
XMLHttpRequest对象的status属性返回的HTTP状态码可以判断服务响应的数据是否完成了传递,当状态码为数字“4”时,即表示服务器响应的数据完成了传递。
关键技术
JavaScript
ECMAScript绑定和处理所有数据。
ECMAScript是客户端的一种基于对象的解释型脚本语言,不需要编译,可以直接由浏览器来解释执行。它可以改变
HTML网页的内容、HTML标记的属性、HTML的样式以及对网页数据进行验证。通过
ECMAScript可以实现回应客户的需求事件不用任何的网络回传资料,即当客户输入一项资料时,不用经过传给服务器端处理再传回来的过程,而可以直接被客户端的应用程序所处理。
在AJAX开发中可以通过JavaScript管理操作 XMLHttpRequest对象的方法或属性来跟数据库进行
数据交换,而且JavaScript不允许访问本地的
HDD,不能将数据存到服务器上,不会对网络文档修改和删除,只能通过浏览器实现信息浏览或动态交互,所以它能够有效的防止数据丢失。
XMLHttpRequest
使用XMLHttpRequest进行异步数据读取。XMLHttpRequest是一个内置的浏览器对象,用于在后台与服务器交换数据。它是AJAX的核心技术,允许在
ECMAScript中发出HTTP请求。通过这个对象,AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换,而不用每次都刷新界面,减轻了服务器的负担又加快了响应速度。它可以对任何数据进行操作,有同步和异步两种操作模式,使用AJAX发送HTTP请求有三个步骤:Create(创建)-\u003e(Initialize)初始化-\u003e(send out)发送。示例代码如下:
XMLHttpRequest属性
XMLHttpRequest方法
HTML和CSS
使用HTML和CSS将Web页面标准化呈现。HTML(Hyper Text Markup Language)是一种用于制作网页的
HTML,负责制作网页的内容,在AJAX中,它允许通过
ECMAScript来操作HTML元素,并且可以实现动态的网页效果。HTML的结构分为两部分:文档类型声明和文档。示例代码如下:
层叠样式表即Cascading Style
工作表的简称,称为
层叠样式表,用于指定
HTML网页中一个元素或元素的显示样式,如颜色,位置和大小等。CSS在AJAX中的作用是开发统一的界面布局并能随时修改部分元素的样式,相当于表现层,通常不会牵扯到任何数据操作。HTML应用CSS有三种方式,分别是行内
样式表、内部样式表和外部样式表。示例代码如下:
DOM
使用DOM实现动态显示和交互。DOM(Document Object Model)文档对象模型,是
HTML文档的编程接口,给文档提供了一个结构化的表述并且定义了一种程序可以对结构树进行访问的方式。W3C定义DOM为一种独立于平台和语言的独立接口,允许程序和脚本动态的访问并修改文档的内容、结构和风格。在AJAX中,用户界面的更新主要靠DOM来完成。
DOM中节点分为7种类型,分别是元素、属性、文本、注释、文档、文档类型和文档片段节点,每个节点以Node对象进行表示,每一个节点有一个nodeType属性,用来表示节点的类型,并提供节点操作的属性和方法。
XML、XSLT与JSON
使用XML和
XSLT进行
数据交换与处理。XML(Extensible
标记 Language)可扩展型标记语言,它既无标签集也无语法,是一个用来定义其他语言的源语言,自身定义了语言的核心,提供一种元数据类型框架。
XSLT定义了一套转换语言,把操作XML数据的层次推向
高级语言的境界,也就是说把XML文件转换成另一个XML文件。
XSLT声明一套符合XSTL语义和语法要求的规则,经过XSLT处理器解释后,就可以对
XML数据做各种处理。
而在演变的过程中,JSON格式的数据传递实现相较于XML来说更加简单方便,XML格式可以将数据结构化,而JSON格式则更加轻量级和易于解析。当数据量比较多,且需要清晰传递的情况下,采用JSON格式的数据进行传递。但是此种方式传递需要将服务器返回的JSON格式字符串先转化为
ECMAScript对象。
服务器端技术
AJAX需要与服务器进行
数据交换,服务器端负责接收AJAX请求,处理请求并返回数据给客户端。常见的服务器端技术包括
PHP、Java、ASP.NET等。PHP是一种服务器端、跨平台、可以嵌入到
HTML的脚本语言,用作构建动态网站和应用程序,大多数 Web 服务器使用 PHP 来实现基本指令和配置指令。ASP.NET是一种服务器端脚本技术,它使得嵌入网页的脚本可由因特网服务器执行,用于使用 HTML、
层叠样式表 和
ECMAScript 构建网站和 Web 应用程序。 ASP.NET提供用于创建 Web 应用程序的框架,其中ASP.NET AJAX扩展技术无需对服务器执行完全回发,无需代码更改和最少的标记更改,即可执行部分或增量页面更新。Java作为一种面向对象的
计算机程序语言,通用高效且易移植,应用范围广,适合基于Web的服务器后台技术的开发。
jQuery函数
写页面时需要用到大量的AJAX,为了提高工作效率,需要把AJAX操作封装起来,而jQuery是一个用
ECMAScript构建的框架,它可以同时兼容各种市场上主流的浏览器,维持用户的
HTML处于独立状态,建立一个高效易扩展的AJAX技术。jQuery库中封装了AJAX的操作函数,将jQuery和AJAX两种方法相结合能够快速调取函数,使得原来复杂的函数处理工作简单化。
兼容性
AJAX使用了大量的JavaScript和AJAX引擎,这些内容需要浏览器提供足够的支持。不同浏览器创建XMLHttpRequest对象的方法有所差异,IE浏览器使用ActiveXObeject,而其他浏览器使用名为XMLHttpRequest的
ECMAScript内建对象。对于不同浏览器可以采用“try and catch”语句先声明一个保存XMLHttpRequest对象的变量。实例代码如下:
安全性
AJAX在融合多技术的优点的同时,也融合了其缺点,从而加剧了传统Web程序的安全隐患。其中,跨站脚本攻击XSS和跨站请求伪造攻击CSRF就是两种典型的安全隐患。XSS是一种攻击者利用Web应用程序接收表单输入的漏洞,将构造的恶意
HTML、
ECMAScript在用户显示的页面上执行的攻击方式。CSRF与XSS截然不同,它利用用户对网站的信任,盗取用户的个人信息,以用户的名义进行有目的的请求,例如发送信息和邮件,进行购物和货币转账等。
AJAX的异步性也会带来一定的问题,它利用XMLHttpRequest对象在不阻塞客户端操作的情况下将客户端请求提交到服务端处理,这种并行处理方式很可能会造成竞争条件和
死锁。
因此,对敏感数据实施加密传输、实行资源访问控制、利用混淆工具混淆代码、对来自外界的数据进行严格的数据校验、进行严格的用户认证可以减少AJAX技术带来的一些安全隐患。
技术特点
基本特点
传统的服务器端Web应用程序专注于为导致对服务器调用的每个客户端事件生成
HTML 文档。然后,客户端将刷新并重新呈现每个响应的完整HTML 页面。而基于AJAX的客户端的独特之处在于,客户端包含作为
ECMAScript技术嵌入的特定于页面的控制逻辑,该页面根据加载文档、鼠标单击、焦点更改甚至
计时器等事件与JavaScript技术进行交互。AJAX 交互允许将表示
逻辑与数据明确分离,但是它需要不同的服务器端架构来支持此交互模型。
优点
页面不需要重新加载就可以更新页面数据,能够有效维护网页的状态;客户端只需要向服务器端请求必要的数据,不需要获得整个页面,有效减少了
数据通信量,降低了
带宽占用,提高了通信效率;AJAX使用
ECMAScript脚本语言,可以调用外部数据,实现数据聚合的功能;AJAX使得界面与应用的分离,有利于分工合作,提高了效率和安全性。
缺点
AJAX在进行JSON
数据交换和接收外部地址的
XML数据对象时,会使得攻击者将连接注入JSON对象的恶意脚本、修改XML数据、注入恶意代码等达到攻击目的。同时,在进行脚本注入时,如果反馈和调用函数的数据没有经过验证也会产生安全漏洞。攻击者还会在跨域访问采用的第三方代理
桥接提供的回调功能中注入恶意代码进行攻击,此外,跨域伪造请求中,浏览器向其他域发送请求时,恶意攻击行为会通过浏览器调用
cookie会话来窃取身份认证信息。
AJAX病毒可以利用XMLHttpRequest对象,在后台向服务器发送HTTP请求进行DDOS攻击,AJAX病毒运作时不会影响正常
计算机或浏览Web站点,可以在网页上被嵌入执行。多技术的融合创建也使得AJAX病毒能变换出很多攻击方式,从而窃取用户敏感信息、造成服务器资源耗尽。拒绝服务而引起宕机等。
与传统网页请求的区别
应用场景
AJAX技术主要用于交互式网页程序的应用开发,可为用户提供高质高效的浏览体验,它实现了传统Web程序开发领域中“既不干涉用户工作,又为用户提供服务选择”的理想效果。
实时数据更新
采用AJAX技术,可以在用户单击按钮时,使用
ECMAScript和
HTML立即更新用户界面,而且
XMLHttpRequset可以作为一个API,允许Web浏览器与服务器进行
异步通信,并通过它发送HTTP请求来实现网站和服务器之间的
数据交换。,当请求返回时,使用JavaScript和
层叠样式表来响应的更新用户界面,这种方式实现了Web站点的实时响应。
谷歌将AJAX技术应用到 GoogleMap中,用户无需等待刷新即可通过缩小和拖拽看到其他区域。
无刷新交互
AJAX技术使用DOM实现无刷新更新页面,在读取数据的过程中显示的始终是原来的页面状态,只有当接收到全部数据后才显示相应部分的内容,而这种刷新也是瞬间的,用户几乎察觉不到,减少了用户的等待时间,提高了应用的
可用性。
单页面应用
AJAX带来的单页面应用(SPA)是前后端分离模式中的一种,它使得用户能够在页面不跳转的情况下实现与后台的实时交互。这种模式下,AJAX引擎从服务端获取
XML或者其他格式的数据.便可定制整个Web界面,从而使得服务器只专注于数据逻辑处理,可以让Web应用开发的前后端分工明确。
发展趋势与挑战
挑战
使用AJAX开发应用程序面对三个挑战,分别是兼容性相对较弱、可用性考虑和回退功能的问题。因为部分浏览器不能够支持XMLHttpRequest,或由于浏览器安全设置而阻止对XMLHttpRequest的使用。而且,在
XMLHttpRequest处理过程,用户无法知道他们的输入是否已经被注册并处理,会导致用户在等待响应时多次点击按钮。此外,通过 AJAX更新页面打断了浏览器“退回前页”按钮的正常工作,并且不能使用书签功能。
另外,使用Ajax界面可能会增加传递到服务器的请求数量,所以服务器的负载指标是需要考虑的一个设计因素,而且
XMLHttpRequest发送的顺序不能被保证依次结束,设计处理异步服务器的响应也是一个需要考虑的因素。
发展趋势
AJAX技术缺乏标准化组织和良好的基础,所以标准化和规范化是AJAX在发展过程中的必经之路。应用开发需要全面支撑的控件,比如前台到后台、数据到界面、面向数据库应用开发等方面。基础层的结构、控件的关联性与扩展性需要从更高的层面统一规划,高级构件如数据控件、图表、报表等方面的发展也很重要。所以整体化、结构化、扩展性和工具化是AJAX发展的整体框架。
AJAX技术解决传统Web程序开发模式中存在的耦合度较高,串行开发效率低等问题。前后端数据交互使用JSON格式的数据,前端拿到后端数据之后解析数据用AJAX对数据进行渲染,将数据显示在界面上,而通过返回数据的方式将前后端代码彻底解耦,再展现到客户端。
Web 3.0时代,互联网正在向移动化的方向发展,AJAX能够实现移动互联网时代个性优化和精细化的运营。AJAX采取预取模式减少用户的访问延迟,提高
CPU缓存的命中率。AJAX还能实现自动补全待输入的内容,缓解了
手持移动设备输入的压力。而且在整个交互过程中,Web服务器只需要发送最小量必要的交互数据,大幅度的降低
带宽的消耗并缩减数据的传输量。此外,AJAX还能够解决市场份额和应用程序移植与无障碍发布的问题。
示例代码
通过AJAX加载XML文件:
代码显示结果为:
参考资料
Ajax.developer.mozilla.2023-10-27