面试分享｜前端Ajax技术原理

《面试分享｜前端Ajax技术原理》由会员分享，可在线阅读，更多相关《面试分享｜前端Ajax技术原理（5页珍藏版）》请在金锄头文库上搜索。

1、面试分享丨前端Ajax技术原理1. 什么是AJAX?AJAX 全称为“Asynchronous JavaScript and XML（异步 JavaScript 和XML），是一种创建交互式网页应用的网页开发技术。它使用：使用XHTML+CSS来标准化呈现；使用XML和XSLT进行数据交换及相关操作；使用XMLHttpRequest对象与Web服务器进行异步数据通信；使用Javascript操作Document Object Model进行动态显示及交互；使用JavaScript绑定和处理所有数据。2. 与传统的web应用比较传统的Web应用交互由用户触发一个HTTP请求到服务器，服务器对其进

2、行处 理后再返回一个新的HTHL页到客户端，每当服务器处理客户端提交的请求时, 客户都只能空闲等待，并且哪怕只是一次很小的交互、只需从服务器端得到很简 单的一个数据，都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去 重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服 务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面 的响应比本地应用慢得多。与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP 或其它一些基于XML的Web Service接口，并在客户端采用JavaScript处理来 自服务器的响应。因为在服务器和浏览器之

3、间交换的数据大量减少，结果我们就 能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完 成，所以Web服务器的处理时间也减少了。3. AJAX的工作原理Ajax的工作原理相当于在用户和服务器之间加了一个中间层（AJAX引擎）， 使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像一 些数据验证和数据处理等都交给Ajax引擎自己来做，只有确定需要从服务器读 取新数据时再由Ajax引擎代为向服务器提交请求。Ajax 其核心有 JavaScript、XMLHTTPRequest、DOM 对象组成，通过 XmlHttpRequest对象来向服务器发异步请求，从服务器获

4、得数据，然后用 JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请 求数据。让我们来了解这几个对象。（1）.XMLHTTPRequest 对象Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据（又称无 刷新更新页面)，这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。XMLHttpRequest对象方法描述XMLHttpRequest对象属性描述完雀FEsponseText属性描述reacyStatenesponsetaody漲券番返回的主规(非文本楼式)neaponaeStream服务器通回的数据流Status职务器的HTTP伏

5、态码(如：404 = h文杵末找到*、200=-成功，零等)statusfextonreadystatecha钛态改变刊串件融发曙.每个优态改变旳都会艇境逗吓第件业理器通常会调用一TJavaScriptgft请求的状态。有5个可取值；0-未初始他1二正在扣载，已加载.3二査互中服务祸的响应，返回数据的文本responseXML嚴务器扳回的状态文本倩息.HTTP状南码的相应文本(OKNot Found (未找判)等等)胆务幕的响应，返回数据的兼容D0M的文档对象，这个对象可以孵析为一0D对象。(2) .JavaScrip tJavaScript是一在浏览器中大量使用的编程语言。(3) .D0M

6、Document Object ModelDOM是给HTML和XML文件使用的一组API。它提供了文件的结构表述，让你 可以改变其中的內容及可见物。其本质是建立网页与Script或程序语言沟通的 桥梁。所有WEB开发人员可操作及建立文件的属性、方法及事件都以对象来展现 (例如，document就代表“文件本身“这个对像，table对象则代表HTML的表 格对象等等)。这些对象可以由当今大多数的浏览器以Script来取用。一个用 HTML或XHTML构建的网页也可以看作是一组结构化的数据，这些数据被封在DOM (Document Object Model)中，DOM提供了网页中各个对象的读写的支

7、持。(4) .XML可扩展的标记语言(Extensible Markup Language)具有一种开放的、可扩 展的、可自描述的语言结构，它已经成为网上数据和文档传输的标准，用于其他 应用程序交换数据。(5) .综合Ajax引擎，实际上是一个比较复杂的JavaScript应用程序，用来处理用户请求, 读写服务器和更改DOM内容。JavaScript的Ajax引擎读取信息，并且互动地重 写DOM，这使网页能无缝化重构，也就是在页面已经下载完毕后改变页面内容， 这是我们一直在通过JavaScript和DOM在广泛使用的方法，但要使网页真正动 态起来，不仅要内部的互动，还需要从外部获取数据，在以前

8、，我们是让用户来 输入数据并通过DOM来改变网页内容的，但现在，XMLHTTPRequest,可以让我们 在不重载页面的情况下读写服务器上的数据，使用户的输入达到最少。Ajax使Web中的界面与应用分离（也可以说是数据与呈现分离），而在以 前两者是没有清晰的界限的，数据与呈现分离的分离，有利于分工合作、减少非 技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在 的发布系统。也可以把以前的一些服务器负担的工作转嫁到客户端，利于客户端 闲置的处理能力来处理。4. AJAX的优缺点（l）.AJAX的优点.无刷新更新数据。AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信

9、维护数据。这使 得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变 的信息，减少用户等待时间，带来非常好的用户体验。.异步与服务器通信。AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速 的响应能力。优化了 Browser和Server之间的沟通，减少不必要的数据传输、 时间及降低网络上数据流量。.前端和后端负载平衡。AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的 能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服 务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和 响应对服务器造成的负担，

10、提升站点性能。.基于标准被广泛支持。AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程 序，但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化 Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技 术，为那些不支持JavaScript的用户提供替代功能。.界面与应用分离。Ajax使Web中的界面与应用分离（也可以说是数据与呈现分离），有利于分工 合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更 加适用于现在的发布系统。（2）.AJAX的缺点.AJAX干掉了 Back和History功能，即对浏览器机制的破

11、坏。在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆 历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面 之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操 作，但是在Ajax应用程序中，这将无法实现。后退按钮是一个标准的web站点 的重要功能，但是它没法和js进行很好的合作。这是Ajax所带来的一个比较严 重的问题，因为用户往往是希望能够通过后退来取消前一次操作的。那么对于这 个问题有没有办法？答案是肯定的，用过Gmail的知道，Gmail下面采用的Ajax 技术解决了这个问题，在Gmail下面是可以后退的，但是，它也并不能改变Aj

12、ax 的机制，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历 史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。（例如， 当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然 后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。） 但是，虽然说这个问题是可以解决的，但是它所带来的开发成本是非常高的，并 与Ajax框架所要求的快速开发是相背离的。这是Ajax所带来的一个非常严重的 问题。一个相关的观点认为，使用动态页面更新使得用户难于将某个特定的状态 保存到收藏夹中。该问题的解决方案也已出现,大部分都使用URL片断

13、标识符（通 常被称为锚点，即URL中#后面的部分）来保持跟踪，允许用户回到指定的某个 应用程序状态。（许多浏览器允许JavaScript动态更新锚点，这使得Ajax应用 程序能够在更新显示内容的同时更新锚点。）这些解决方案也同时解决了许多关 于不支持后退按钮的争论。.AJAX的安全问题。AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威 胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意 间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫 描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避 免一些已知的安全弱

14、点，诸如跨站点脚步攻击、QL注入攻击和基于Credentials 的安全漏洞等等。.对搜索引擎支持较弱。对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量， 从而降低整个系统的性能。.破坏程序的异常处理机制。至少从目前看来，像Ajax.dll，Ajaxpro.dll这些Ajax框架是会破坏程序 的异常机制的。关于这个问题，曾在开发过程中遇到过，但是查了一下网上几乎 没有相关的介绍。后来做了一次试验，分别采用Ajax和传统的form提交的模式 来删除一条数据给我们的调试带来了很大的困难。5.违背URL和资源定位的初衷。例如，我给你一个URL地址，如果采用了 Ajax技术，也许你在

15、该URL地址下面 看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相 背离的。6.AJAX不能很好支持移动设备。一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax，比如说我们 在手机的浏览器上打开采用Ajax技术的网站时，它目前是不支持的。7.客户端过肥，太多客户端代码造成开发上的成本。编写复杂、容易出错；冗余代码比较多(层层包含js文件是AJAX的通病，再 加上以往的很多服务端代码现在放到了客户端)；破坏了 Web的原有标准。5. AJAX注意点及适用和不适用场景(1).注意点Ajax开发时，网络延迟一一即用户发出请求到服务器发出响应之间的间隔一一 需要慎重考虑。不 给予用户明确的回应，没有恰当的预 读数据，或者对 XMLHttpRequest的不恰当处理，都会使用户感到延迟，这是用户不希望看到的 也是他们无法理解的。通常的解决方案是，使用一个可视化的组件来告诉用户系 统正在进行后台操作并且正在读取数据和内容。(2) .Ajax适用场景.表单驱动的交互.深层次的树的导航.快速的用户与用户间的交流响应.类似投票、yes/no等无关痛痒的场景.对数据进行过滤和操纵相关数据的场景.普通的文本输入提示和自动完成的场景(3) .Ajax不适用场景.部分简单的表单.搜索