写点什么

AJAX 工作原理及其优缺点

作者:编程江湖
  • 2022 年 1 月 17 日
  • 本文字数:2381 字

    阅读完需:约 8 分钟

AJAX 全称为“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),是一种创建交互式网页应用的网页开发技术。它使用:


使用 XHTML+CSS 来标准化呈现;


使用 XML 和 XSLT 进行数据交换及相关操作;


使用 XMLHttpRequest 对象与 Web 服务器进行异步数据通信;


使用 Javascript 操作 Document Object Model 进行动态显示及交互;


使用 JavaScript 绑定和处理所有数据。

与传统的 web 应用比较

传统的 Web 应用交互由用户触发 一个 HTTP 请求到服务器,服务器对其进行处理后再返回一个新的 HTHL 页到客户端, 每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的 HTML 页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽,由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务 器的响应时间。这导致了用户界面的响应比本地应用慢得多。


与此不同,AJAX 应用可以仅向服务器发送并取回必需的数据,它使用 SOAP 或其它一些 基于 XML 的 Web Service 接口,并在客户端采用 JavaScript 处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少,结果我们就能看到响应更快的应用。前端培训同时很多的处理工作可以在发出请求的客户端机器上完成,所以 Web 服务器的处理时间也减少了。

AJAX 的工作原理

Ajax 的工作原理相当于在用户和服 务器之间加了—个中间层(AJAX 引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给 Ajax 引擎自己来做, 只有确定需要从服务器读取新数据时再由 Ajax 引擎代为向服务器提交请求。


Ajax 其核心有 JavaScript、XMLHTTPRequest、DOM 对象组成,通过 XmlHttpRequest 对象来向服务器发异步请求,从服务器获得数据, 然后用 JavaScript 来操作 DOM 而更新页面。这其中最关键的一步就是从服务器获得请求数据。

AJAX 的优缺点

(1).AJAX 的优点

1.无刷新更新数据。AJAX 最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得 Web 应用程序更为迅捷地响应用户交互,并避免了在网络上发送那些没有改变的信息,减少用户等待时间,带来非常好的用户体验。


2.异步与服务器通信。AJAX 使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。优化了 Browser 和 Server 之间的沟通,减少不必要的数据传输、时间及降低网络上数据流量。


3.前端和后端负载平衡。AJAX 可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,AJAX 的原则是“按需取数据”,可以最大程度的减少冗余请求和响应对服务器造成的负担,提升站点性能。


4.基于标准被广泛支持。AJAX 基于标准化的并被广泛支持的技术,不需要下载浏览器插件或者小程序,但需要客户允许 JavaScript 在浏览器上执行。随着 Ajax 的成熟,一些简化 Ajax 使用方法的程序库也相继问世。同样,也出现了另一种辅助程序设计的技术,为那些不支持 JavaScript 的用户提供替代功能。


5.界面与应用分离。Ajax 使 WEB 中的界面与应用分离(也可以说是数据与呈现分离),有利于分工合作、减少非技术人员对页面的修改造成的 WEB 应用程序错误、提高效率、也更加适用于现在的发布系统。

(2).AJAX 缺点

1.AJAX 干掉了 Back 和 History 功能,即对浏览器机制的破坏:在动态更新页面的情况下,用户无法回到前一个页面状态,因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙;用户通常会希望单击后退按钮能够取消他们的前一次操作,但是在 Ajax 应用程序中,这将无法实现的 ,后退按钮是一个标准的 web 站点的重要功能,但是它没法和 js 进行很好的合作。


2.AJAX 的安全问题:AJAX 技术给用户带来很好的用户体验的同时也对 IT 企业带来了新的安全威胁,Ajax 技术就如同对企业数据建立了一个直接通道。深圳前端培训这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax 的逻辑可以对客户端的安全扫描技术隐藏起来,允许黑客从远端服务器上建立新的攻击。还有 Ajax 也难以避免一些已知的安全弱点,诸如跨站点脚步攻击、SQL 注入攻击和基于 Credentials 的安全漏洞等等。


3.对搜索引擎支持较弱:对搜索引擎的支持比较弱。如果使用不当,AJAX 会增大网络数据的流量,从而降低整个系统的性能。


4.破坏程序的异常处理机制:至少从目前看来,像 Ajax.dll,Ajaxpro.dll 这些 Ajax 框架是会破坏程序的异常机制的。


5.违背 URL 和资源定位的初衷:我给你一个 URL 地址,如果采用了 Ajax 技术,也许你在该 URL 地址下面看到的和我在这个 URL 地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。


6.AJAX 不能很好支持移动设备:一些手持设备(如手机、PDA 等)现在还不能很好的支持 Ajax。


7.客户端过肥,太多客户端代码造成开发上的成本:编写复杂、容易出错 ;冗余代码比较多(层层包含 js 文件是 AJAX 的通病,再加上以往的很多服务端代码现在放到了客户端);破坏了 Web 的原有标准。


8.如果用户禁用了 JS,网站就取不到数据。

AJAX 注意点及适用和不适用场景

1.注意点 Ajax 开发时,网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应,没有恰当的预读数据,或者对 XMLHttpRequest 的不恰当处理,都会使用户感到延迟,这是用户不希望看到的,也是他们无法理解的。通常的解决方案是,使用一个可视化的组件来 告诉用户系统正在进行后台操作并且正在读取数据和内容。


2.Ajax 适用场景


<1>.表单驱动的交互

<2>.深层次的树的导航

<3>.快速的用户与用户间的交流响应

<4>.类似投票、yes/no 等无关痛痒的场景

<5>.对数据进行过滤和操纵相关数据的场景

<6>.普通的文本输入提示和自动完成的场景


3.Ajax 不适用场景


<1>.部分简单的表单

<2>.搜索

<3>.基本的导航

<4>.替换大量的文本

<5>.对呈现的操纵

用户头像

编程江湖

关注

IT技术分享 2021.11.23 加入

还未添加个人简介

评论

发布
暂无评论
AJAX工作原理及其优缺点