氢原子百科 
AJAX的全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式Web应用的网页开发的技术，它综合利用了已经存在的各种技术，包括：HTML或XHTML、CSS、JavaScript、DOM、XML、XSLT、以及最重要的XMLHttpRequest对象，[1]从而生成一种全新的应用。[5]它可以与服务器通信、交换数据并更新页面，而无需刷新页面。[1]
AJAX最早应用于1998年，由微软公司的小组写的一个组件使得AJAX技术成功应用于商业应用程序，但是当时并没有AJAX这个概念的产生。[6]后来于2005年被谷歌公司用于开发交互式应用程序而被广泛应用，同年，Jesse James Garrett在一篇文章中首次提出了AJAX这个名词，并且阐明了所包含的技术和应用定位，AJAX技术的交互式特性使得其成为Web2.0的核心技术。[2]
AJAX技术是使用客户端脚本与Web服务器交换数据的Web应用开发方法，使得Web的应用程序像桌面应用程序一样拥有直接、高可用、更丰富、更动态的Web用户界面。[7]而AJAX的技术融合性使得其有利也有弊，在提供高效率的同时也带来了一些安全性的问题。[8]
发展历程
最初的Web页面都是静态的，这个阶段的Web应用程序不能与客户产生任何互动，为满足客户需求，动态的脚本语言开始出现，如JSP、ASP和PHP等。[5]1995年，Netscape公司添加了一项称为LiveScript（也就是后来的JavaScript）的功能，该功能允许人们将小脚本放在网页中，以便可以在下载后继续执行操作。LiveScript更名为JavaScript后，开启了动态HTML技术的发展，丰富了页面和交互能力。在后来Mozilla的早期版本中，Netscape展示了一种新的技术，使用一段XML数据通过JavaScript呈现给客户，这意味着渲染可以即实的更改了。[9]
AJAX技术在1998年前后得到应用。Microsoft为其Outlook Web Access 2000 版本创建了 XMLHTTP ActiveX 对象，意在为Exchange Server提供基于Web的访问。部分观察家认为，Outlook Web Access是第一个应用了AJAX技术的成功的商业应用程序。[6]1999年3月，Microsoft在Internet Explorer 5.0中发布了XMLHttpRequest 的原始形式，[10]这允许浏览器向服务器发出 HTTP 请求，并在后台以 XML 格式取回一些数据，意味着可以在页面上刷新数据，而无需完全重新加载。[11]
AJAX被广泛应用是于2005年。2005年2月，Jesse James Garrett在《Ajax: A New Approach to Web Applications》一文[12]中首次提出了AJAX这个名词，并将其应用于一种新的Web开发方法。[11]Garrett的文章中提出了一个理念：使用AJAX消除Web应用程序和桌面应用程序在系统的人机交互方面存在的差距，[2]他将JavaScript、XHTML、CSS、DOM、XMLHttpRequest、XML和XSTL综合运用的技术成为AJAX。[2]而用户互动是Web 2.0的典型功能，[13]所以AJAX成为了Web 2.0中的核心技术。[5]同年，谷歌在其交互式应用程序（如谷歌地图、谷歌学术搜索等）中使用AJAX技术，实现了快速的地图加载和交互式操作，AJAX技术开始被广泛应用到程序开发中。[3]
随着AJAX技术的广泛应用，各种前端框架和库开始涌现。2006年，John Resig发布了jQuery框架，[14]其中封装了很多方法让开发人员能够快速地实现动画，并且能够简洁地发送AJAX，简化了AJAX的使用。[15]后来AJAX概念的进一步发展，不再局限于使用XML作为数据交换，而是开始支持使用其他格式，比如JSON。它是一种轻量级的数据交换格式，相较于XML而言，它的结构简洁，解析起来更快；占用的存储空间少， 网络传输也更快。[16]
2012年，W3C[注1]组织发布了HTML5规范，[17]包括了新的Web API，支持AJAX的文件上传，[18]进一步划分清楚了HTML和CSS在AJAX应用中的职责，[19]随着Web 3.0时代的到来，互联网朝着移动化的方向发展，AJAX技术因能够解决移动应用的很多问题，逐渐应用于移动端的开发，包括网络连接间断、带宽限制、补全输入、应用程序移植于无障碍发布等问题。[20]
工作原理
AJAX提供了同步和异步两种类型的请求，其中同步请求将阻塞 JavaScript 代码的执行，直到响应到达为止。[21]异步请求可以允许网站提供不间断的服务，异步通信机制原理是不等待服务器生成响应，JavaScript便继续执行其他的工作，使页面在处理响应时具有响应性，这一步通过调用open方法中设置的async参数来实现。[22]这种异步交互的方式消除了同步交互方式中出现的“处理->等待->处理->等待”缺陷。[2]发送请求时，AJAX把JavaScript技术和XMLHttpRequest对象放在Web表单和服务器之间，当用户填写表单时，数据发送给一些JavaScript代码而不是直接发送给服务器，JavaScript代码捕获表单数据并向服务器发出请求。[5]
实质上AJAX遵循了Request/Server模式，首先创建XMLHttpRequest对象，然后通过对这个对象进行各种操作来完成和服务器的通信。成功创建XMLHttpRequest对象之后，使用JavaScript代码向服务器发送请求，服务器接收到用户的请求之后，可以根据请求内容进行相应的操作，然后把数据以合适的格式返回给客户端。[5]
当服务器结束对用户请求的处理以后，会把处理的结果返回给用户，在客户端对返回的内容进行处理，然后根据其处理结果对页面进行调整，到这一步，客户端对服务器的异步通信就完成了。服务器用XML文档返回逻辑处理的结果，在客户端可以通过XMLHttpRequest对象的responseXML属性取出服务器返回的相应文档。然后在JavaScript中，可以用DOM方式分析这个XML文档，从而取出用户需要的内容。[5]
XMLHttpRequest对象的status属性返回的HTTP状态码可以判断服务响应的数据是否完成了传递，当状态码为数字“4”时，即表示服务器响应的数据完成了传递。[23][5]
| HTTP状态码[1] | |
|---|---|
| 状态 | 说明 |
| 0 | 请求没有发出（在调用open（））前 |
| 1 | 请求已经建立但是还未发出（调用send（））之前 |
| 2 | 请求已经发出并正在处理 |
| 3 | 请求已经处理，响应中有部分数据可用，还未完全响应 |
| 4 | 响应已经完成，可以访问服务器响应并使用它 |
JavaScript
Javascript绑定和处理所有数据。[24]JavaScript是客户端的一种基于对象的解释型脚本语言，[25]不需要编译，可以直接由浏览器来解释执行。[15]它可以改变HTML网页的内容、HTML标记的属性、HTML的样式以及对网页数据进行验证。[26]通过JavaScript可以实现回应客户的需求事件不用任何的网络回传资料，即当客户输入一项资料时，不用经过传给服务器端处理再传回来的过程，而可以直接被客户端的应用程序所处理。[25]
在AJAX开发中可以通过JavaScript管理操作 XMLHttpRequest对象的方法或属性来跟数据库进行数据交换，[25]而且JavaScript不允许访问本地的硬盘，不能将数据存到服务器上，不会对网络文档修改和删除，只能通过浏览器实现信息浏览或动态交互，所以它能够有效的防止数据丢失。[27]
XMLHttpRequest
使用XMLHttpRequest进行异步数据读取。[24]XMLHttpRequest是一个内置的浏览器对象，用于在后台与服务器交换数据。它是AJAX的核心技术，允许在JavaScript中发出HTTP请求。通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，减轻了服务器的负担又加快了响应速度。[24]它可以对任何数据进行操作，有同步和异步两种操作模式，使用AJAX发送HTTP请求有三个步骤：Create（创建）->（Initialize）初始化->（send out）发送。[28]示例代码如下：
// 创建XHR对象 var xhr = new XMLHttpRequest(); //初始化 xhr.open(method, URL, [async, user, password]) //发送 xhr.send([body])
XMLHttpRequest属性[28]
| 属性 | 说明 |
|---|---|
| XMLHttpRequest.onreadystatechange | 当 readyState 属性发生变化时，调用的事件处理器 |
| XMLHttpRequest.readyState | 返回一个无符号短整型（unsigned short）数字，代表请求的状态码 |
| XMLHttpRequest.responseType | 一个用于定义响应类型的枚举值（enumerated value） |
| XMLHttpRequest.response | 返回一个 ArrayBuffer、Blob、Document，或 DOMString，具体是哪种类型取决于 XMLHttpRequest.responseType 的值。其中包含整个响应实体（response entity body） |
| XMLHttpRequest.responseText | 返回一个 DOMString，该 DOMString 包含对请求的响应，如果请求未成功或尚未发送，则返回 null |
| XMLHttpRequest.responseURL | 返回经过序列化（serialized）的响应 URL，如果该 URL 为空，则返回空字符串 |
| XMLHttpRequest.responseXML | 返回一个 Document，其中包含该请求的响应，如果请求未成功、尚未发送或是不能被解析为 XML 或 HTML，则返回 null |
| XMLHttpRequest.status | 返回一个无符号短整型（unsigned short）数字，代表请求的响应状态 |
| XMLHttpRequest.statusText | 返回一个 DOMString，其中包含 HTTP 服务器返回的响应状态。与 XMLHTTPRequest.status 不同的是，它包含完整的响应状态文本 |
| XMLHttpRequest.timeout | 一个无符号长整型（unsigned long）数字，表示该请求的最大请求时间（毫秒），若超出该时间，请求会自动终止 |
| XMLHttpRequest.upload | XMLHttpRequestUpload (en-US)，代表上传进度 |
| XMLHttpRequest.withCredentials | 一个布尔值 (en-US)，用来指定跨域 Access-Control 请求是否应当带有授权信息，如 cookie 或授权 header 头 |
XMLHttpRequest方法[28]
| 方法 | 说明 |
|---|---|
| XMLHttpRequest.abort() | 如果请求已被发出，则立刻中止请求 |
| XMLHttpRequest.getAllResponseHeaders() | 以字符串的形式返回所有用 CRLF 分隔的响应头，如果没有收到响应，则返回 null |
| XMLHttpRequest.getResponseHeader() | 返回包含指定响应头的字符串，如果响应尚未收到或响应中不存在该报头，则返回 null |
| XMLHttpRequest.open() | 初始化一个请求 |
| XMLHttpRequest.overrideMimeType() | 覆写由服务器返回的 MIME 类型 |
| XMLHttpRequest.send() | 发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回 |
| XMLHttpRequest.setRequestHeader() | 设置 HTTP 请求标头的值。必须在 open() 之后、send() 之前调用 setRequestHeader() 方法 |
HTML和CSS
使用HTML和CSS将Web页面标准化呈现。[24]HTML（Hyper Text Markup Language）是一种用于制作网页的超文本标记语言，[30]负责制作网页的内容，在AJAX中，它允许通过JavaScript来操作HTML元素，并且可以实现动态的网页效果。[31]HTML的结构分为两部分：文档类型声明和文档。示例代码如下：[26]
<!--类型声明文档--> <!DOCTYPE html> <!--文档部分--> <head> <body> </body> </head>
CSS即Cascading Style Sheet的简称，称为层叠样式表，用于指定HTML网页中一个元素或元素的显示样式，如颜色，位置和大小等。CSS在AJAX中的作用是开发统一的界面布局并能随时修改部分元素的样式，相当于表现层，通常不会牵扯到任何数据操作。[25]HTML应用CSS有三种方式，分别是行内样式表、内部样式表和外部样式表。示例代码如下：[26]
<p style >行内样式表</p> <style type="text/css"> CSS的内部样式表 </style> <!--外部样式表--> <link rel=""type="text/css"href="mystyle.css"> <!--外部样式表--> <style type = "text/css"> @import url(mystyle.css> </style>
DOM
使用DOM实现动态显示和交互。[24]DOM（Document Object Model）文档对象模型，是HTML文档的编程接口，给文档提供了一个结构化的表述并且定义了一种程序可以对结构树进行访问的方式。[15]W3C定义DOM为一种独立于平台和语言的独立接口，允许程序和脚本动态的访问并修改文档的内容、结构和风格。[26]在AJAX中，用户界面的更新主要靠DOM来完成。[25]
DOM中节点分为7种类型，分别是元素、属性、文本、注释、文档、文档类型和文档片段节点，每个节点以Node对象进行表示，每一个节点有一个nodeType属性，用来表示节点的类型，并提供节点操作的属性和方法。[26]
XML、XSLT与JSON
使用XML和XSLT进行数据交换与处理。[24]XML（Extensible Markup Language）可扩展型标记语言，它既无标签集也无语法，是一个用来定义其他语言的源语言，自身定义了语言的核心，提供一种元数据类型框架。[32]
XSLT定义了一套转换语言，把操作XML数据的层次推向高级语言的境界，也就是说把XML文件转换成另一个XML文件。XSLT声明一套符合XSTL语义和语法要求的规则，经过XSLT处理器解释后，就可以对XML数据做各种处理。[33]
而在演变的过程中，JSON格式的数据传递实现相较于XML来说更加简单方便，XML格式可以将数据结构化，而JSON格式则更加轻量级和易于解析。[16]当数据量比较多，且需要清晰传递的情况下，采用JSON格式的数据进行传递。但是此种方式传递需要将服务器返回的JSON格式字符串先转化为Javascript对象。[34]
| XML和JSON的对比[35] | ||
|---|---|---|
| 特征 | XML | JSON |
| 数据类型 | 不提供数据类型的任何概念。 必须依赖 XML 架构 来添加类型信息 | 提供标量数据类型，以及通过数组和对象表达结构化数据的功能 |
| 命名空间 | 支持命名空间，这消除了合并文档时名称冲突的风险。 命名空间还允许安全地扩展现有的基于 XML 的标准 | 没有命名空间的概念。 通常可以通过嵌套对象或在对象成员名称中使用前缀来避免命名冲突， (在实践中首选前者) |
| 对对象的支持 | 对象必须通过约定来表示，通常通过混合使用属性和元素 | 本机对象支持 |
| 对数组的支持 | 数组必须通过约定来表示，例如，通过使用外部占位符元素将数组内容建模为内部元素。 通常，外部元素使用用于内部元素的名称的复数形式 | 本机数组支持 |
| 大小 | 文档的大小往往很长，尤其是在使用以元素为中心的格式设置方法时 | 语法非常简洁，并生成格式化文本，其中大部分空间 (正确使用，因此由表示的数据) |
| 在 JavaScript 中分析 | 需要 XML DOM 实现和其他应用程序代码才能将文本映射回 JavaScript 对象 | 分析文本不需要其他应用程序代码;可以使用 JavaScript 的eval函数 |
服务器端技术
AJAX需要与服务器进行数据交换，服务器端负责接收AJAX请求，处理请求并返回数据给客户端。[5]常见的服务器端技术包括PHP、Java、ASP.NET等。PHP是一种服务器端、跨平台、可以嵌入到HTML的脚本语言，[36]用作构建动态网站和应用程序，大多数 Web 服务器使用 PHP 来实现基本指令和配置指令。[37]ASP.NET是一种服务器端脚本技术，它使得嵌入网页的脚本可由因特网服务器执行，[38]用于使用 HTML、CSS 和 JavaScript 构建网站和 Web 应用程序。 ASP.NET提供用于创建 Web 应用程序的框架，[39]其中ASP.NET AJAX扩展技术无需对服务器执行完全回发，无需代码更改和最少的标记更改，即可执行部分或增量页面更新。[40]Java作为一种面向对象的计算机程序语言，通用高效且易移植，应用范围广，适合基于Web的服务器后台技术的开发。[41]
jQuery函数
写页面时需要用到大量的AJAX，为了提高工作效率，需要把AJAX操作封装起来，[42]而jQuery是一个用JavaScript构建的框架，它可以同时兼容各种市场上主流的浏览器，维持用户的HTML处于独立状态，建立一个高效易扩展的AJAX技术。[43]jQuery库中封装了AJAX的操作函数，[42]将jQuery和AJAX两种方法相结合能够快速调取函数，使得原来复杂的函数处理工作简单化。[43]
| jQuery操作函数[42] | |
|---|---|
| 函数 | 描述 |
| jQuery.ajax() | 执行异步 HTTP (AJAX) 请求 |
| .ajaxComplete() | 当 AJAX 请求完成时注册要调用的处理程序。这是一个 AJAX 事件 |
| .ajaxError() | 当 AJAX 请求完成且出现错误时注册要调用的处理程序。这是一个 AJAX 事件 |
| .ajaxSend() | 在 AJAX 请求发送之前显示一条消息 |
| jQuery.ajaxSetup() | 设置将来的 AJAX 请求的默认值 |
| .ajaxStart() | 当首个 AJAX 请求完成开始时注册要调用的处理程序。这是一个 AJAX 事件 |
| .ajaxStop() | 当所有 AJAX 请求完成时注册要调用的处理程序。这是一个 AJAX 事件 |
| .ajaxSuccess() | 当 AJAX 请求成功完成时显示一条消息 |
| jQuery.get() | 使用 HTTP GET 请求从服务器加载数据 |
| jQuery.getJSON() | 使用 HTTP GET 请求从服务器加载 JSON 编码数据 |
| jQuery.getScript() | 使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件 |
| .load() | 从服务器加载数据，然后把返回到 HTML 放入匹配元素 |
| jQuery.param() | 创建数组或对象的序列化表示，适合在 URL 查询字符串或 AJAX 请求中使用 |
| jQuery.post() | 使用 HTTP POST 请求从服务器加载数据 |
| .serialize() | 将表单内容序列化为字符串 |
| .serializeArray() | 序列化表单元素，返回 JSON 数据结构数据 |
兼容性
AJAX使用了大量的JavaScript和AJAX引擎，这些内容需要浏览器提供足够的支持。[44]不同浏览器创建XMLHttpRequest对象的方法有所差异，IE浏览器使用ActiveXObeject，而其他浏览器使用名为XMLHttpRequest的JavaScript内建对象。对于不同浏览器可以采用“try and catch”语句先声明一个保存XMLHttpRequest对象的变量。实例代码如下：[45]
<html> <body> <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { xmlHttp=new XMLHttpRequest(); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您的浏览器不支持AJAX！"); return false; } } } } </script> </body> </html>
XMLHttpRequest对象的浏览器兼容性：
| - | 电脑浏览器 | 手机浏览器 | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on iOS | Samsung Internet | WebView Android | |
| XMLHttpRequest | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 |
| XMLHttpRequest() constructor | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 |
| abort | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 |
| Authorization header removed from cross-origin redirects | 否 | 否 | 是 | 否 | 是 | 否 | 是 | 否 | 是 | 否 | 否 |
| error event | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 |
| getResponseHeader | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 |
| load event | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 |
| loadend event | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 |
| loadstart event | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 |
| open | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 |
| overrideMimeType | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 |
| readyState | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 |
| response | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 |
| send | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 |
| setAttributionReporting | 是 | 是 | 否 | 是 | 否 | 实验中 | 否 | 否 | 否 | 否 | 实验中 |
| setPrivateToken | 是 | 是 | 否 | 是 | 否 | 实验中 | 否 | 否 | 否 | 否 | 实验中 |
| setRequestHeader | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 |
| status | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 |
| statusText | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 |
| timeout | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 |
| timeout event | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 |
| upload | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 |
| withCredentials | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 |
| Available in workers | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 | 是 |
安全性
AJAX在融合多技术的优点的同时，也融合了其缺点，从而加剧了传统Web程序的安全隐患。其中，跨站脚本攻击XSS和跨站请求伪造攻击CSRF就是两种典型的安全隐患。XSS是一种攻击者利用Web应用程序接收表单输入的漏洞，将构造的恶意HTML、JavaScript在用户显示的页面上执行的攻击方式。[46]CSRF与XSS截然不同，它利用用户对网站的信任，盗取用户的个人信息，以用户的名义进行有目的的请求，例如发送信息和邮件，进行购物和货币转账等。[47]
AJAX的异步性也会带来一定的问题，它利用XMLHttpRequest对象在不阻塞客户端操作的情况下将客户端请求提交到服务端处理，这种并行处理方式很可能会造成竞争条件和死锁。[46]
因此，对敏感数据实施加密传输、实行资源访问控制、利用混淆工具混淆代码、对来自外界的数据进行严格的数据校验、进行严格的用户认证可以减少AJAX技术带来的一些安全隐患。[48]
基本特点
传统的服务器端Web应用程序专注于为导致对服务器调用的每个客户端事件生成 HTML 文档。然后，客户端将刷新并重新呈现每个响应的完整HTML 页面。而基于AJAX的客户端的独特之处在于，客户端包含作为JavaScript技术嵌入的特定于页面的控制逻辑，该页面根据加载文档、鼠标单击、焦点更改甚至计时器等事件与JavaScript技术进行交互。AJAX 交互允许将表示逻辑与数据明确分离，但是它需要不同的服务器端架构来支持此交互模型。[49]
优点
页面不需要重新加载就可以更新页面数据，能够有效维护网页的状态；客户端只需要向服务器端请求必要的数据，不需要获得整个页面，有效减少了数据通信量，降低了带宽占用，提高了通信效率；[50]AJAX使用JavaScript脚本语言，可以调用外部数据，实现数据聚合的功能；AJAX使得界面与应用的分离，有利于分工合作，提高了效率和安全性。[51]
缺点
AJAX在进行JSON数据交换和接收外部地址的XML数据对象时，会使得攻击者将连接注入JSON对象的恶意脚本、修改XML数据、注入恶意代码等达到攻击目的。同时，在进行脚本注入时，如果反馈和调用函数的数据没有经过验证也会产生安全漏洞。攻击者还会在跨域访问采用的第三方代理桥接提供的回调功能中注入恶意代码进行攻击，此外，跨域伪造请求中，浏览器向其他域发送请求时，恶意攻击行为会通过浏览器调用cookie会话来窃取身份认证信息。[8]
AJAX病毒可以利用XMLHttpRequest对象，在后台向服务器发送HTTP请求进行DDOS攻击，AJAX病毒运作时不会影响正常计算机或浏览Web站点，可以在网页上被嵌入执行。多技术的融合创建也使得AJAX病毒能变换出很多攻击方式，从而窃取用户敏感信息、造成服务器资源耗尽。拒绝服务而引起宕机等。[52]
与传统网页请求的区别[52]
| AJAX方式 | 传统方式 |
|---|---|
| 请求以异步方式进行，间隔由AJAX引擎决定 | 请求发送直到接收到响应 |
| 请求可以采用任何形式，只要AJAX组件支持 | 请求以表单的形式进行，采用GET或POST方法 |
| 通常只是对网页的局部进行更新 | 浏览器与服务器间的交互是一个完整页面请求 |
| 响应是一个数据片，通常由AJAX进行DOM解析 | 响应信息组成一个全新页面 |
应用场景
AJAX技术主要用于交互式网页程序的应用开发，可为用户提供高质高效的浏览体验，它实现了传统Web程序开发领域中“既不干涉用户工作，又为用户提供服务选择”的理想效果。[54]
实时数据更新
采用AJAX技术，可以在用户单击按钮时，使用JavaScript和HTML立即更新用户界面，而且XMLHttpRequset可以作为一个API，允许Web浏览器与服务器进行异步通信，并通过它发送HTTP请求来实现网站和服务器之间的数据交换。[55]，当请求返回时，使用JavaScript和CSS来响应的更新用户界面，这种方式实现了Web站点的实时响应。[56]Google公司将AJAX技术应用到 GoogleMap中，用户无需等待刷新即可通过缩小和拖拽看到其他区域。[57]
无刷新交互
AJAX技术使用DOM实现无刷新更新页面，在读取数据的过程中显示的始终是原来的页面状态，只有当接收到全部数据后才显示相应部分的内容，而这种刷新也是瞬间的，用户几乎察觉不到，减少了用户的等待时间，提高了应用的可用性。[58]
单页面应用
AJAX带来的单页面应用（SPA）是前后端分离模式中的一种，它使得用户能够在页面不跳转的情况下实现与后台的实时交互。[59]这种模式下，AJAX引擎从服务端获取XML或者其他格式的数据．便可定制整个Web界面，从而使得服务器只专注于数据逻辑处理，[58]可以让Web应用开发的前后端分工明确。[59]
挑战
使用AJAX开发应用程序面对三个挑战，分别是兼容性相对较弱、可用性考虑和回退功能的问题。因为部分浏览器不能够支持XMLHttpRequest，或由于浏览器安全设置而阻止对XMLHttpRequest的使用。而且，在XMLHttpRequest处理过程，用户无法知道他们的输入是否已经被注册并处理，会导致用户在等待响应时多次点击按钮。此外，通过 AJAX更新页面打断了浏览器“退回前页”按钮的正常工作，并且不能使用书签功能。[60]
另外，使用Ajax界面可能会增加传递到服务器的请求数量，所以服务器的负载指标是需要考虑的一个设计因素，而且XMLHttpRequest发送的顺序不能被保证依次结束，设计处理异步服务器的响应也是一个需要考虑的因素。[60]
发展趋势
AJAX技术缺乏标准化组织和良好的基础，所以标准化和规范化是AJAX在发展过程中的必经之路。应用开发需要全面支撑的控件，比如前台到后台、数据到界面、面向数据库应用开发等方面。基础层的结构、控件的关联性与扩展性需要从更高的层面统一规划，高级构件如数据控件、图表、报表等方面的发展也很重要。所以整体化、结构化、扩展性和工具化是AJAX发展的整体框架。[61]
AJAX技术解决传统Web程序开发模式中存在的耦合度较高，串行开发效率低等问题。前后端数据交互使用JSON格式的数据，前端拿到后端数据之后解析数据用AJAX对数据进行渲染，[62]将数据显示在界面上，而通过返回数据的方式将前后端代码彻底解耦，再展现到客户端。[63]
Web 3.0时代，互联网正在向移动化的方向发展，AJAX能够实现移动互联网时代个性优化和精细化的运营。AJAX采取预取模式减少用户的访问延迟，提高缓存的命中率。AJAX还能实现自动补全待输入的内容，缓解了移动设备输入的压力。而且在整个交互过程中，Web服务器只需要发送最小量必要的交互数据，大幅度的降低带宽的消耗并缩减数据的传输量。此外，AJAX还能够解决市场份额和应用程序移植与无障碍发布的问题。[20]
示例代码
通过AJAX加载XML文件：
<!DOCTYPE html> <html> <style> table,th,td { border : 1px solid black; border-collapse: collapse; } th,td { padding: 5px; } </style> <body> <h1>XMLHttpRequest 对象</h1> <button type="button" onclick="loadDoc()">获取我的音乐列表</button> <br><br> <table id="demo"></table> <script> function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "/demo/music_list.xml", true); xhttp.send(); } function myFunction(xml) { var i; var xmlDoc = xml.responseXML; var table="<tr><th>艺术家</th><th>曲目</th></tr>"; var x = xmlDoc.getElementsByTagName("TRACK"); for (i = 0; i <x.length; i++) { table += "<tr><td>" + x[i].getElementsByTagName("ARTIST").childNodes.nodeValue + "</td><td>" + x[i].getElementsByTagName("TITLE").childNodes.nodeValue + "</td></tr>"; } document.getElementById("demo").innerHTML = table; } </script> </body> </html>
代码显示结果为：
参考资料 63
- Ajax — developer.mozilla
- http://book.gzlib.org/views/specific/2929/bookDetail.jsp?dxNumber=000018684698&d=F00B991406CCAF0599D2CAEF5AEE9625&fenlei=1817040302
- http://kns.cnki.net.https.gzlib.proxy.chaoxing.com/KCMS/detail/detail.aspx?filename=1015594736.nh&dbname=CMFDTEMP
- XMLHttpRequest — mozilla
- http://book.gzlib.org/views/specific/2929/bookDetail.jsp?dxNumber=000018760899&d=ADE2BDE45FA9F109EBAC93A276D1E880&fenlei=1817040302
- The birth of AJAX – an amazing story — techtracer
- 浅谈Ajax技术在WEB网站的应用 — 暨南大学附属脑科医院
- https://d.wanfangdata.com.cn/Periodical/ChlQZXJpb2RpY2FsQ0hJTmV3UzIwMjMwODMxEhFqc2p5eXlyajIwMTEwMzA4ORoIdnBoY3h0YnY%3D
- A Brief History of Ajax — aaronsw
- 25 岁的 JavaScript 都经历了什么? — 网易
- What Does AJAX Even Stand For? — thehistoryoftheweb
- Ajax: A New Approach to Web Applications — ReadPaper
- http://book.gzlib.org/views/specific/2929/bookDetail.jsp?dxNumber=000006605084&d=82BC0958AFC9FA5372996BFAFA0F6387&fenlei=07030103
- jQuery History — javatpoint
- http://book.gzlib.org/views/specific/2929/bookDetail.jsp?dxNumber=000017814197&d=3D316DD978993F92C59BF05BD1C39B55&fenlei=1817041103010901
- JSON和正则表达式 — 清华大学出版社
- https://d.wanfangdata.com.cn/Periodical/ChlQZXJpb2RpY2FsQ0hJTmV3UzIwMjMwODMxEg93eGhsa2oyMDE2MTMwMTQaCGNvajdoM3k4
- html5关于上传api的一些使用(下) — u72
- Ajax应用开发:实践者指南_Java_成富_InfoQ精选文章 — infoq
- https://kns.cnki.net/kcms2/article/abstract?v=AnKLoVmldNTN0bvPTogLicegqX9niUZgrmhZqyPe8O6r-zCc2eKyRnH85E1EkcZZEb06fZTNm9HmVRHps9n4iGlmcnO6lL0oQOgASn8PcYfHx6bGeDKAKIaGINyR0kgxSh2At8a1udj21Y2aB7_g8g==&uniplatform=NZKPT&language=CHS
- AJAX - 创建 XMLHttpRequest 对象 — infoq
- WhatisanasynchronousrequestinAJAX? — geeksforgeeks
- http://book.gzlib.org/views/specific/2929/bookDetail.jsp?dxNumber=000008167211&d=2D72E2468E15FC275A4FE544CD21543F&fenlei=1817040302
- http://kns.cnki.net.https.gzlib.proxy.chaoxing.com/KCMS/detail/detail.aspx?filename=2006166408.nh&dbname=CMFD2006
- https://d.wanfangdata.com.cn/Periodical/ChlQZXJpb2RpY2FsQ0hJTmV3UzIwMjMwODMxEg1zeXpzMjAyMDA0MDI0Gghjd21zcDl1aw%3D%3D
- 参考 26
- http://book.gzlib.org/views/specific/2929/bookDetail.jsp?dxNumber=000018831039&d=ADD9D89D76868392CDAC85317F0FFFB8&fenlei=1817040302
- XMLHttpRequest — javascript
- XMLHttpRequest — mozilla
- https://d.wanfangdata.com.cn/Periodical/ChlQZXJpb2RpY2FsQ0hJTmV3UzIwMjMwODMxEg1xYnp6MjAwMTA2MDE1Ggh0dXc4cGhjZA%3D%3D
- 将 JavaScript 与 ASP.NET 2.0 配合使用 — microsoft
- http://book.gzlib.org/views/specific/2929/bookDetail.jsp?dxNumber=000000104091&d=4EAF4B2F693F4224445A27C5CC0A6693&fenlei=1817040302
- http://book.gzlib.org/views/specific/2929/bookDetail.jsp?dxNumber=000001251466&d=3878C15060F93BFCDB82E29AE0FAF985&fenlei=1817040302
- 学一下Ajax — 中国科学技术大学
- JavaScript 和 .NET 中的 JavaScript 对象表示法 (JSON) 简介 — microsoft
- http://book.gzlib.org/views/specific/2929/bookDetail.jsp?dxNumber=000014981101&d=E8A18C7DE11AF402781D618240C15CB6&fenlei=1817040302
- Top 7 Server-side Scripting Languages — orientsoftware
- http://book.gzlib.org/views/specific/2929/bookDetail.jsp?dxNumber=000014982935&d=2E495FFBEE1F6E5B31E35286C8EFF6A9&fenlei=1817041103010901
- ASP.NET 概述 — microsoft
- 了解使用 ASP.NET AJAX 的部分页面更新 — microsoft
- https://d.wanfangdata.com.cn/Periodical/ChlQZXJpb2RpY2FsQ0hJTmV3UzIwMjMwODMxEhBobGpranh4MjAxODA5MDQwGgh3azJ4b240Yw%3D%3D
- jQuery 参考手册 - Ajax — w3school
- https://d.wanfangdata.com.cn/Periodical/ChlQZXJpb2RpY2FsQ0hJTmV3UzIwMjMwODMxEhlkbnpzeWpzLWl0cnp5a3NiMjAyMDM2MDg2GghwODl1cnFucA%3D%3D
- https://kns.cnki.net/kcms2/article/abstract?v=kT75Tk44258X_mzZG0lN-9HijBGaX6D6eD1gnNCoVn3zHNN8ultwUCJdu40xp_ZEmahHUAo-Cg--P_6In3z2i_iF8xu_fNLrv1ot3HX_gBfew4AdndsjbBYiGsPCXkSI-QQq-Xjfkn8=&uniplatform=NZKPT&language=CHS
- AJAX 浏览器支持 — w3school
- https://d.wanfangdata.com.cn/Periodical/ChlQZXJpb2RpY2FsQ0hJTmV3UzIwMjMwODMxEg95Ynh5eGIyMDEzMTIwMjAaCHh5bHpnODJ2
- https://d.wanfangdata.com.cn/Thesis/ChJUaGVzaXNOZXdTMjAyMzA5MDESB0Q3ODUxODkaCHh5bHpnODJ2
- https://d.wanfangdata.com.cn/Thesis/ChJUaGVzaXNOZXdTMjAyMzA5MDESCFkxNDM2ODkyGgh0anUxN3dzNA%3D%3D
- What Is AJAX.. — microsoft
- http://book.gzlib.org/views/specific/2929/bookDetail.jsp?dxNumber=000006307450&d=B34C2009C7E7C68F7980172641999E8D&fenlei=181704110301090133
- https://d.wanfangdata.com.cn/Periodical/ChlQZXJpb2RpY2FsQ0hJTmV3UzIwMjMwODMxEg10eWtqMjAwOTA1MDI2Gghha3VwbnB4cw%3D%3D
- https://d.wanfangdata.com.cn/periodical/xxhjs201510075
- https://d.wanfangdata.com.cn/Periodical/ChlQZXJpb2RpY2FsQ0hJTmV3UzIwMjMwODMxEg96Z3hia2oyMDExMDIwMTUaCHY2ZHk4b2Jr
- https://d.wanfangdata.com.cn/Periodical/ChlQZXJpb2RpY2FsQ0hJTmV3UzIwMjMwODMxEg9neGZ6a2oyMDIwMDIwNzgaCHMxcjE5ZzZn
- 使用 XMLHttpRequest — mozilla
- https://d.wanfangdata.com.cn/Thesis/ChJUaGVzaXNOZXdTMjAyMzA5MDESCFkxMDI5NjI5GghtdmsxOHd2aA%3D%3D
- https://d.wanfangdata.com.cn/Periodical/ChlQZXJpb2RpY2FsQ0hJTmV3UzIwMjMwODMxEhNqc2pncHJqeXl5MjAxMDA0MDg0GghwYW42cnE4bg%3D%3D
- https://d.wanfangdata.com.cn/Periodical/ChlQZXJpb2RpY2FsQ0hJTmV3UzIwMjMwODMxEhN6Z3hqc3hjcGp4MjAxMDIzMDI4GghwbjZhZ3M3Mg%3D%3D
- 前后端分离的终端自适应动态表单设计 — 计算机系统应用
- 使用Ajax的挑战 — 电脑编程技巧与维护
- https://kns.cnki.net/kcms2/article/abstract?v=AnKLoVmldNT4tu16SOg-C6dqFtxkeWY-MTeMzpAGzYq9PQplI2tO1htkPTj0swFmfx5BeOGWZ2tbT5fZJ8kYvSPvdvvmBsOF0h1peR5UNBEDH01ADwqTkupHLV6expdkdqV183LaoOQ=&uniplatform=NZKPT&language=CHS
- https://d.wanfangdata.com.cn/Periodical/ChlQZXJpb2RpY2FsQ0hJTmV3UzIwMjMwODMxEg5yamdjczIwMjAwNDAwNhoIcTFidHRrZDU%3D
- https://d.wanfangdata.com.cn/Periodical/ChlQZXJpb2RpY2FsQ0hJTmV3UzIwMjMwODMxEg5qc2pzZDIwMjIxMDAwMhoIcTFidHRrZDU%3D
注释
- 万维网联盟