AJAX工作原理及其优缺点

浅浅的花香味﹌ 2022-10-01 04:42 240阅读 0赞

# 什么是AJAX? #

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>.无刷新更新数据。

<2>.异步与服务器通信。

<3>.前端和后端负载平衡。

<4>.基于标准被广泛支持。

<5>.界面与应用分离。

## (2).AJAX的缺点 ##

<1>.AJAX干掉了Back和History功能，即对浏览器机制的破坏。

<2>.AJAX的安全问题。

<3>.对搜索引擎支持较弱。

<4>.破坏程序的异常处理机制

<5>.违背URL和资源定位的初衷。

<6>.AJAX不能很好支持移动设备。

<7>.客户端过肥，太多客户端代码造成开发上的成本。

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

## (1).注意点 ##

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

## (2).Ajax适用场景 ##

<1>.表单驱动的交互

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

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

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

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

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

## (3).Ajax不适用场景 ##

<1>.部分简单的表单

<2>.搜索

<3>.基本的导航

<4>.替换大量的文本