AJAX 的使用

Posted 2021-04-15 朗沃IT学习

1999 年，微软公司发布 IE5，第一次引入新功能： 允许 javascript 脚本向服务器发起 HTTP 请求。但是这个功能当时并没有引起广泛的注意。直到 2004 年Gmail 的发布和 2005 年 Google Map 的发布，才引起广泛重视。

2005 年 2 年，AJAX 这个词第一次正式被提出。它指的就是围绕“允许JavaScript 脚本向服务器发起 HTTP 请求”这个功能进行开发的一整套做法。从此，AJAX 成为了脚本发起 HTTP 通信的代名词，W3C 也在 2006 年发布了它的国际标准。

技术背景

---

在 AJAX 技术出现之前，客户端和服务端之间传输数据都是通过 form 表单。在Web 应用程序中，客户通过表单提交自己输入的信息，服务器端的程序接受到客户提交的表单后，根据表单的数据内容进行处理，然后把处理结果返回给用户，这样就完成了一个简单的交互。

但是这种数据传输方式有一个很大的缺陷，就是每次用户与服务器的交互都需要重新刷新整个页面。正是因为这些缺陷的存在，才促使了 AJAX 技术的出现。

概述

---

AJAX 的全称是 Asynchronous JavaScript and XML（异步 JavaScript 和XML），意思就是“用 JavaScript 执行异步网络请求”。它不是一项新技术，而是很多原有的成熟技术的结合体。

传统的 Web 应用程序中，每次用户的请求都会导致重新刷新整个页面，而采用AJAX 以后，只需要刷新局部页面即可。实现与服务器的异步通信、局部刷新页面，这就是 AJAX 技术的核心所在。

工作原理

AJAX 包括以下步骤：

1.  创建 XHR 对象；

2. 发出 HTTP 请求；

3.  接收服务器传回的数据；

4. 更新网页数据;

图解 AJAX 工作原理

概括起来，就是一句话，AJAX 通过原生的 XMLHttpRequest 对象发出 HTTP 请求，得到服务器返回的数据后，再进行处理。

图解 AJAX 与传统方式的区别：

大致了解了 AJAX 的工作原理之后，接下来我们就具体来学习一下 AJAX 工作中的每一个步骤。

创建对象

---

AJAX 技术的核心就是 XMLHttpRequest 对象（简称 XHR）。这是由微软率先引用的一个特性，是一种支持异步请求的技术。（后来其他浏览器开发商也都提供了相同的功能实现。）

简而言之，XMLHttpRequest 用于在后台与服务器交换数据。这意味着用户操作页面后，可以不必刷新页面也能够取得新的数据。

创建 XMLHttpRequest 对象

创建一个 XMLHttpRequest 对象，也叫实例化一个 XMLHttpRequest 对象。因为 XMLHttpRequest() 本身是一个构造函数。

IE5 是第一款引用 XMLHttpRequest 对象的浏览器。在 IE5 和 IE6 中，XHR 对象是通过 MSXML 库中的一个 ActiveX 对象实现的。

而 IE7+ 及其他标准浏览器都支持原生的 XMLHttpRequest 对象。为了应对所有浏览器，下面是创建 XMLHttpRequest 对象的兼容写法。

发送请求

如果需要将请求发送到服务器，我们要使用 XMLHttpRequest 对象的open() 和send() 方法。

• open()

open() 方法，用来打开与服务器的连接，规定了请求的类型、URL 以及是否异步处理请求。如下所示，该方法接收三个参数。

参数说明：

• method：指定发送请求的方式。字符串类型，取值为 GET 或 POST（不区分大小写，建议使用大写）。

• URL：文件在服务器上的位置。

• async：表示是否异步处理请求。布尔值类型，默认为 true，表示异步，false表示同步。

• send()

send()方法，将请求发送到服务器。该方法接收一个参数，作为请求主体发送的数据。

参数说明：

• 如果发送请求的方式是 GET，则 send() 方法无参数或参数为 null；

• 如果发送请求的方式是 POST，则 send() 方法的参数为“要发送的数据”。

• GET 和 POST

与 POST 相同，GET 的请求方式更简单也更快，并且在大部分情况下都能使用。但是，在以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）；

• 向服务器发送大量数据（POST 没有数据量限制）；

• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠；

接收响应

如果需要获得来自服务器的响应，需要使用 XMLHttpRequest 对象的responseText 或 responseXML 属性。

• responseText：获得字符串形式的响应数据。

• responseXML：获得 XML 形式的响应数据。

但是因为我们发送请求时可以通过不同的方式（异步或同步），那么在接收响应时也就有所不同。

• 同步请求的响应

当我们采用同步处理请求（即 open() 的第三个参数为 false）时，可以直接通过XMLHttpRequest 对象的 responseText 或 responseXML 属性来接收响应返回的文本数据。

我们不推荐使用同步处理请求的方式。因为使用这种方式， JavaScript 会一直等到服务器响应就绪后才继续执行，如果服务器繁忙或缓慢，应用程序就会挂起或停止。但是对于一些小型的请求，也是可以的。

• 异步请求的响应

当我们采用异步处理请求（即 open() 的第三个参数为 true）时，我们需要去设置，当响应处于 onreadystatechange 事件中的就绪状态时执行的函数.

• onreadystatechange 事件

当请求被发送到服务器，我们需要执行一些基于响应的任务：每当 XMLHttpRequest 对象的状态，即 readyState 属性发生改变时，就会触发onreadystatechange 事件。

所以，这会涉及到 XMLHttpRequest 对象的三个重要属性：

• onreadystatechange：函数名。每当 readyState 属性发生改变时，会自动调用该函数。

• readyState：存储 XMLHttpRequest 对象的状态。从 0 到 4 发生变化。

• 0：请求未初始化，即还没有调用 send() 方法；

1：服务器连接已建立，即已调用 send() 方法，正在发送请求；

2：请求已接收，即 send() 方法执行完成；

3：请求处理中，即正在解析响应内容；

4：请求已完成，且响应已就绪，即响应内容解析完成，可以在客户端进行调用了；

• status：状态码。

• 200：“OK”

• 404：未找到页面

• ...

在 onreadystatechange 事件中，我们需要定义当服务器已做好被处理的准备后所应执行的任务。当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

更新数据

---

当我们接收到服务器响应回来的数据后，就可以用新的数据去更新我们的应用程序了。

完整代码

我们将上面分解的每一步整合在一起，就是一个完整的 AJAX 请求代码了。

注：以上代码未考虑兼容性。

JQuery 中的 AJAX

---

JQuery 对原生AJAX 做了很好的封装，使用起来非常简单方便。具体的很多方法，如： $.ajax()、$.post()、$.get()、$.getJSON() 等。相比起原生的AJAX 来说，这些方法在写法上更加简洁，我们可以根据不同需要进行调用。

但是为了兼顾各个方法，这里我们以一个通用的方法 $.ajax() 为例做一个简单的讲解。

例：

AJAX 的优缺点

---

优点：

1. 页面无刷新，在页面内与服务器通信，减少用户等待时间，增强了用户体验。

2. 使用异步方式与服务器通信，响应速度快。

3. 可以把一些原本服务器的工作转接到客户端，利用客户端闲置的能力来处理，减轻了服务器和宽带的负担，节约空间和宽带租用成本。

4. 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：

1. 无法进行操作的后退，即不支持浏览器的页面后退。

2. 对搜索引擎的支持比较弱。

3. 可能会影响程序中的异常处理机制。

4. 安全问题，对一些网站攻击，如 csrf、xxs、sql 注入等不能很好地防御。

今天沃师傅的知识小课堂就到这里，朋友们，下次见~