javascript笔记：Ajax概述

- 日理万妓 2023-06-19 04:17 88阅读 0赞

*  Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
 *  Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。
 *  Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。  
    
    
    ### 文章目录 ###
    
     *  Ajax概述
     *  Ajax原理分解
     *  Ajax技术的优点
     *  Ajax技术的缺点

# Ajax概述 #

Ajax不是一项新技术，它是多种流行技术的集合，具体内容如下：

<table> 
 <thead> 
  <tr> 
   <th>技术名称</th> 
   <th>内容</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>网页显示技术：</td> 
   <td>使用HTML和CSS实现网页框架和布局。</td> 
  </tr> 
  <tr> 
   <td>网页交互技术：</td> 
   <td>利用DOM（Document Object Model，文档对象模型）标准实现对网页元素的引用和操作。</td> 
  </tr> 
  <tr> 
   <td>数据交换和处理技术：</td> 
   <td>利用XML和XSLT数据格式实现数据的交换</td> 
  </tr> 
  <tr> 
   <td>异步通讯技术：</td> 
   <td>使用XMLHttpRequest组件实现浏览器与服务器之间的请求与响应</td> 
  </tr> 
  <tr> 
   <td>逻辑控制技术：</td> 
   <td>使用JavaScript脚本整合以上所有的技术</td> 
  </tr> 
 </tbody> 
</table>

Ajax提供了与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。借助于Ajax技术，可以在用户单击按钮时，使用JavaScript和DHTML（对大多数人来说，DHTML 意味着 HTML、CSS和 JavaScript 的组合。）立即更新页面部分或者全部显示信息，并向服务器发出异步请求，以执行更新或者查询数据库。当请求返回时，就可以使用JavaScript和CSS来进行相应的更新，而不是刷新整个页面。更重要的是，用户甚至不知道浏览器正在与服务器进行通信，Web站点看起来是即是响应的。

事实上在Ajax被命名之前，已经有人综合使用这些技术，不过实现起来非常复杂。另外，一些工具也提供了相似功能，如Macromedia Flash插件，Java Applets和.NET等，在应用上已经有了一段时间。

把一种可与服务器通话的脚本组件引入到浏览器的思想早在IE5.0中就已经存在。Firefox和其他流行的浏览器一样也加入到浏览器大军中，并以一种内置对象形式支持XMLHTTPRequest。随着跨平台浏览器的出现，这些技术得到了认可，2004年3月一家称为Adaptive Path的公司正式提出了Ajax。

通过Ajax，可以使得客户端得到丰富的应用体验以及交互操作，而用户不会感觉到有网页提交或刷新的过程，页面也不需要被重新加载，原理是利用Ajax技术把浏览器与服务器之间的数据交换都隐藏起来。在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能：

*  在购物网站中，无需用户单击更新按钮，并等待服务器重新发送整个页面，浏览器会动态的更新浏览器的物品数量，这样用户能够及时、准确地查看自己选购的物品。
 *  提升站点的性能，这是通过减少从服务器下载的数据量实现的。例如，在Amazon的购物车页面，当更新篮子中的一项物品时，会重新载入整个页面，这必须下载几十K的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之一。
 *  消除了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击下一页的超链接，则服务器数据只刷新列表而不是整个页面。
 *  直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。应用Ajax技术，当用户单击\[编辑\]按钮时，可以将静态表格刷新为内容可编辑的表格。用户单击\[执行\]按钮之后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。

Ajax最典型的应用是Google的Maps，是它把Ajax技术完美地展现在世人面前，并迅速轰动全球。Google的Maps能够实现监视用户的操作，并提供实时页面的更新，用户可以用鼠标任意拖动地图。

# Ajax原理分解 #

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer5中首次引入，它是一种支持异步请求技术。简而言之，XmlHttpRequest能够使用户使用javascript向服务器提出请求并处理响应，而不阻碍用户的其他操作。

传统的Web应用允许用户填写表单（form），当提交表单时就向Web服务器发送一个请求，服务器接收并处理传来的表单，然后返回一个新的网页。这个做法会浪费很多带宽，因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间取决于服务器的响应时间，这就导致了用户界面的响应比本地应用慢很多。传统Web应用交互模式如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyNDIzNA_size_16_color_FFFFFF_t_70]  
一个任务所需步骤越多，用户需要等待的次数也越多，所以这种方式并没有给予用户很好的应用体验。当服务器在处理数据时，用户处于等待状态，每一步操作都需要等待，太多的等待会使得用户越来越没有耐心。

Ajax则大不同，它通过Ajax引擎，仅向服务器发送并取回必须的数据，并在客户端采用JavaScript处理来自服务器的响应，因此，在服务器和浏览器之间的交换数据大量减少，结果就能看到响应更快的网页。同时，很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器处理的时间也减少了。

Ajax利用一种中间的媒介（Ajax引擎）消除了用户和服务器交互间的等待，这就像在传统的Web模型中间加入了一层处理模块，可以降低响应时间。替代页面下载的是在Session刚开始时，浏览器下载一个用JavaScript编写的Ajax引擎，通常放在一个隐藏的框架里，这个引擎替代用户和服务器进行通信。Ajax允许用户交互和服务器响应是异步的。如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyNDIzNA_size_16_color_FFFFFF_t_70 1]

# Ajax技术的优点 #

与传统的Web应用不同，Ajax在用户与服务器之间引入一个中间媒介（Ajax引擎），从而消除了网络交互过程中的处理-等待-处理-等待的缺点。

*  （1）可以把一部分以前由服务器负担的工作转移到客户端，利用客户端闲置的资源进行处理，减轻服务器和带宽的负担，节约空间和成本。
 *  （2）无刷新更新页面，从而使用户不再像以前一样在服务器处理数据时，只能在死板的白屏面前焦急的等待。Ajax使用XMLHttpRequest对象发送请求并得到服务器的响应，在不需要重新载入整个页面的情况下，就可以通过DOM及时将更新的内容显示在页面上。
 *  （3）调用XML等外部数据，进一步促进页面显示和数据分离。
 *  （4）基于标准化的并被广泛支持的技术，不需要下载插件或者小程序，即可轻松实现桌面应用程序的效果。
 *  （5）Ajax没有平台限制。Ajax把服务器的角色由原本传输内容转变为传输数据，而数据格式则可以是纯文本格式和XML格式，这两种格式没有平台限制。

# Ajax技术的缺点 #

*  （1）浏览器对XMLHttpRequest对象支持不足，为使Ajax在各个浏览器中都能正常运行，开发者必须花费大量精力去编码，从而实现浏览器的兼容，这样使得Ajax开发难度高于普通Web开发。
 *  （2）破坏浏览器“前进”和“后退”按钮正常行为，使用Ajax改变了这个Web浏览习惯。在动态更新页面的情况下，用户无法回到前一个页面的状态，因为浏览器仅能记住历史记录中的静态页面。用户通常希望单击“后退”按钮取消他们前一次的跳转操作，在Ajax中可能无法这样做。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyNDIzNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191204145532161.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyNDIzNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyNDIzNA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191204150812373.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyNDIzNA==,size_16,color_FFFFFF,t_70