Ajax 编程
1999 年，微软公司发布 Internet Explorer 5，第一次引入新功能：允许 JavaScript 脚本向服务器发起 HTTP 请求。这个功能当时并没有引起人们太多的关注，直到 2004 年 Gmail 的发布以及 2005 年 Google Map 发布，才引起广泛重视。
2005 年 2 月，Ajax 这个词第一次正式提出，指围绕这个功能进行开发的一整套做法。从此，Ajax 成为脚本发起 HTTP 通信的代名词，W3C 也在 2006 年发布了它的国际标准。
本章我们将学习如下内容：
- Ajax 基本介绍
- Mock.js 介绍
- Ajax 具体实现
Ajax 基本介绍
1. 什么是 Ajax
当万维网开始时，网页只包含静态内容。客户端和服务端之间传输数据都是通过 form 表单。在 Web 应用程序中，客户通过表单提交自己输入的信息，服务器端的程序接受到客户提交的表单后，根据表单的数据内容进行处理，然后把处理结果返回给用户，这样就完成了一个简单的交互。
但是这种数据传输方式有一个很大的缺陷，就是每次用户与服务器的交互都需要重新刷新整个页面。在那个网速不佳的年代，重新刷新页面的成本是很高的，通常会导致在加载页面时屏幕变空白。
1999 年，微软公司在 Internet Explorer 5 中实现了 XMLHttp ActiveX 控件。它最初是为 outlook Web 客户端而开发的，允许在后台使用 JavaScript 异步发送数据。随后其他浏览器也实现了这种技术，不过它仍然是一个相对未知的功能，很少使用。
2004 年和 2005 年，Google 公司相继推出了 Gmail 和 Google 地图。从这个时候开始，异步加载技术开始备受关注。这些 Web 应用程序使用的异步加载技术，通过更改页面部分内容而不进行全面刷新来增强了用户的体验。让用户感觉更像是一个桌面应用程序。
Ajax 这个术语是由 Jesse James Garrett 于 2005 年在"Ajax：一种新的 Web 应用程序方法"一文中所创造的，他提到了 Google 在其最近的 Web 应用程序中使用到的技术。Ajax 是一个简洁的首字母缩写词，指的是该技术在使用的过程中所涉及到的不同部分，全称：Asynchronous JavaScript and XML。
Asynchronous：翻译成中文是异步的意思，当发送数据请求时，程序不必停下来等待响应。它可以继续运行，等待响应收到时触发事件。通过使用回调来管理这种过程，程序能够以有效的方式运行，避免了数据来回传输带来的延迟。
JavaScript：利用 JavaScript 我们可以接收来自服务器端返回的数据，并将这些数据实时的更新到页面上。
XML：最开始术语 Ajax 被创造时，经常用 XML 文档来返回数据。但是实际上可以发送许多不同类型的数据。到目前为止，在 Ajax 中最常用的是 JSON，它比 XML 更轻量且更易于解析。JSON 还具备被 JavaScript 原生支持的优点，所以我们可以处理 JavaScript 对象，而不必使用 DOM 方法来解析 XML 文件。
在 Garrett 的文章发表以后，Ajax 的使用真正开始起飞。现在用户不必刷新页面，就可以在网页上看到新的内容。例如购物篮的数据在后台更新，但是页面上的内容却可以无缝加载，还有诸如动态加载照片库等。
基本上可以这么说，当需要网页部分页面更新时，不太可能不用 Ajax。公共 API 的爆炸式增长，也意味着 Ajax 比以往任何时候都更多地在站点之间来回传输数据。
Ajax 实现了与服务器的异步通信、局部刷新页面，这就是 Ajax 技术的核心所在。当然 Ajax 也不是只有优点没有缺点，关于 Ajax 的优缺点总结如下：
优点：
页面无刷新，在页面内与服务器通信，减少用户等待的时间，增强了用户体验。
使用异步方式与服务器通信，响应速度快。
可以把一些原本服务器的工作转接到客户端，利用客户端闲置的能力来处理，减轻了服务器和宽带的负担，节约空间和宽带租用成本。
基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
缺点
无法进行操作的后退，即不支持浏览器的页面后退。
对搜索引擎的支持比较弱。
可能会影响程序中的异常处理机制。
安全问题。对一些网站的攻击，如 CSRF，XXS，SQL 注入等不能很好的防御。
2. Ajax 实现原理
使用原生的 Ajax 大致包括以下几步骤：
1. 创建XMLHttpRequest对象 2. 发出HTTP请求 3. 接收服务器传回的数据 4. 更新网页数据
概括起来，就是一句话，Ajax 通过原生的 XMLHttpRequest 对象发出 HTTP 请求，得到服务器返回的数据后，再进行处理。下面我们通过一张图来解释 Ajax 的工作原理：
下面的图解释了 Ajax 和传统方式的区别，如下：
大致了解了 Ajax 的工作原理之后，接下来我们需要搭建一个服务器来返回一些数据。但是由于现在我们没有学习过任何服务器相关的知识，所以这里我们先使用 Mock 来模拟服务器端返回的数据。
Comments