没错，这正是我们接下来要讲的 Ajax 的直接图。正如场景所示，前端在点击按钮的时候，可以触发网络请求（具体可以看 Gif 图右边）。当后端返回数据时，前端数据并在网页的局部位置。

相信工作于前后端的同学对 Ajax 应该不会陌生，有些经验的程序员，对于上图所示的前后端交互也早已习以为常。在我们日常工作中，Ajax 绝对是我们用来进行网络交互的重要利器。并且在前后端分离的实践中扮演着极其重要的角色。

先引用 Ajax 的英文原义：

Asynchronous JavaScript and XML

直观可见，Ajax就是这个英文的首字母缩写而成。意思就是异步的 JavaScript 和 XML，换言之，我们也可以用 JavaScript 执行异步网络请求。

在 Ajax 出现之前，我们也有网页，我们的前后端信息也需要交互，那么我们是怎么做的呢？

当时的做法是：刷新（重载）或面。举两个例子：

也许这个时候你会觉得奇怪，交互一次就需要刷新一次？这未免也太过笨拙！是的，如你所见，在 Ajax 之前，HTTP 请求对应着，一次 HTTP 请求也就意味着需要请求。

当然，人往高处走，总会有更加先进的办法来当前的问题。因此，逐渐的，我们有了 Ajax。

Ajax 最早要追溯到 2005 年，由 Jesse James Garrett 首先提出。当时 Jesse James Garrett 在他的 “Ajax : new Approach to Web Applications” 一文中提出了综合了 Html , JavaScript , XHTML , Cascading Style Sheets , The Document Object Model , XMLHttpRequest , XML 和 XSTL 等现有技术的新，取名为 Ajax 。并且使用这种技术以后，前后端就可以不需要重载就能够直接进行交互，能够迅速的把信息反映在界面上。

虽然 Ajax 中，X 是 XML 的意思，但是前后端交互中，JSON 尤其重要，同时也拥有更多的好处（比如：更轻量）。因此，在 Ajax 中，JSON 和 XML 一样，共同用于信息传输的打包载体中。

说这么多，那么什么是 Ajax 呢？

简单来讲，Ajax 就是 JavaScript 基于 XMLHttpRequest 对象与服务端进行交互，向服务端发送请求，并且和处理服务器返回的。个过程中，我们可以使用 XML ，HTML 和 JSON 等格式的数据进行交互。并且，Ajax 拥有异步特质，我们可以在不刷新的情况下，通过交互数据，在上做局部的刷新等数据处理。

Ajax 相当于和服务端的中间层，用来处理异步化的数据交互。这里涉及到两个重要的点：XMLHttpRequest 和 异步。

先讲异步，异步指的是无需等待，异步操作不会阻碍当前的活动。在早期，对于我们的 Web 交互，每次发送请求，都会阻塞当前活动，进行重载。而在服务器响应请求之前，浏览器只能是一片空白。体验极其差！然而，使用异步就能够这个问题，浏览器端发送请求，但是不会阻塞当前的活动，也不会丢弃，数据一样可以进行交互和刷新。体验极佳！

另 XMLHttpRequest 可以说是 Ajax 的核心技术。使用 XMLHttpRequest ，我们可以通过 JavaScript 向服务端发送请求，并且和处理服务端返回的数据，却不会阻塞活动，而仅仅只是局部动态更新，更加不会导致 web 频繁重载。

Ajax 工作过程大致如下：

Ajax 技术的优势有如下几点：

当然，Ajax 带来的最大的优势还是通过异步请求和处理数据的方式，取代了通过原始 Form 表单提交来更新数据及的方式，从而使得我们的 Web 应用成为了可能。

Ajax 的缺点主要有如下几点：