Ajax简介

Ajax全称:Asynchronous JavaScript and XML(异步 JavaScript 和 XML)。

Ajax是一种使用XML格式(后期并不局限于XML格式)与后台交换数据,并使用JavaScript来实现数据的发送、接收、更新UI的异步技术,它实现了Web应用无刷新地动态加载数据。

目前,Ajax的底层实现有两种方式:

  • XMLHttpRequest API: 通过创建XMLHttpRequest实例实现异步加载,优点:几乎所有的浏览器都兼容。
  • Fetch API: 未来的Ajax实现方案,用于替代XMLHttpRequest。优点:模块化,接口设计更合理。缺点:部分低版本不支持。

利用Ajax数据更新对传统的数据更新的优势

传统的web更新数据

在Web互联网发展初期,几乎所有的网页都是同步实现数据更新的。这种方式使得用户想要获取新的数据,就必须发起重载页面的请求。

同步的web更新

           我在财务报表页面,当前显示的是6月份报表数据,但我需要7月份的
      -------------------------------------------------------------> 
客户端                                                                服务器
      <------------------------------------------------------------
           从数据库拉取七月份的报表并整合进财务报表页面,并将页面再次返回给你

同步更新的缺点很明显:

  1. 客户端角度:每次请求数据都需要重新加载页面。用户体验差。
  2. 通讯角度:每次请求需要重新传输HTML、css,脚本文件等资源,浪费带宽资源。
  3. 服务器角度:每次请求都要重新计算获取所有的数据,包括之前已发送给用户的数据,造成资源浪费。

使用Ajax更新web资源

Ajax实现了异步更新数据,用户请求资源不再需要重载页面。只要发起一个ajax请求,获取当前想要的资源即可。

异步的web更新

                    我在财务报表页面,当前显示的是6月份报表数据,但我需要7月份的
      -----------------------------------------------------------------------------> 
客户端                                                                                服务器
      <-----------------------------------------------------------------------------
       从数据库拉取7月份数据并返回,客户端接收数据,并更新界面。期间用户可以不必等待,处理其它业务。

使用Ajax更新web资源优势:

  1. 客户端角度:不再需要重载整个页面,请求响应速度更快。在等待响应的过程中,页面不会锁死,用户可以进行其它操作,提升了用户体验。
  2. 通讯角度:使用XML、JSON等格式包裹数据。节省了带宽资源。
  3. 服务器角度:仅计算发送当前需要的资源即可。