前端 JS 之 AJAX 简介及使用
概述
AJAX 是一个缩写，它的全名是 Asynchronous JavaScript and XML，意思就是异步 JavaScript 和 XML，即用JavaScript执行异步网络请求。
AJAX 不是一种新技术，而是一个在 2005 年被 Jesse James Garrett 提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括:
- HTML 或 XHTML
- CSS
- JavaScript
- DOM
- XML
- XSLT
- XMLHttpRequest
尽管 X 在 AJAX 中代表 XML, 但由于 JSON 的许多优势，比如更加轻量以及作为 Javascript 的一部分，目前 JSON 的使用比 XML 更加普遍。JSON 和 XML 都被用于在 AJAX 模型中打包信息。
AJAX 的优势
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
AJAX 通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
XMLHttpRequest 对象
XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。
AJAX 的工作原理
其工作原理基本经过以下几个步骤：
- 客户端发送请求，请求交给 xhr。
- xhr 把请求提交给服务。
- 服务器进行业务处理。
- 服务器响应数据交给 xhr 对象。
- xhr 对象接收数据，由 JavaScript 把数据写到页面上。
AJAX 的创建步骤
根据 AJAX 的工作原理，它的创建步骤主要包括：
- 创建 XMLHttpRequest 对象，即创建一个异步调用对象。
- 创建一个新的 HTTP 请求，并指定该 HTTP 请求的方法、URL 及验证信息。
- 设置响应 HTTP 请求状态变化的函数。
- 发送 HTTP 请求。
- 获取异步调用返回的数据。
- 使用 JavaScript 和 DOM 实现局部刷新。
AJAX 的具体使用
以下是 使用 AJAX 的完整流程。
1. 创建 XMLHttpRequest 对象
const request = new XMLHttpRequest();
2. 创建一个新的 HTTP 请求，并指定该 HTTP 请求的方法、URL 及验证信息
创建 HTTP 请求可以使用 XMLHttpReques t对象的 open() 方法,其语法代码如下：
request.open(method, url, async, user, password);
参数解析：
- method 要使用的HTTP方法，比如 "GET"、"POST"、"PUT"、"DELETE" 等。
- url 表示要向其发送请求的 URL 地址。
- async (可选) 一个可选的布尔参数，表示是否异步执行操作，默认为 true。如果值为 false，send() 方法直到收到答复前不会返回。如果 true，已完成事务的通知可供事件监听器使用。如果 multipart 属性为 true 则这个必须为 true，否则将引发异常。
- user (可选 用于认证用途的用户名，默认值为 null。
- password (可选) 用于认证用途的密码，默认值为 null。
3. 设置响应 HTTP 请求状态变化的函数和服务端返回信息函数
创建完 HTTP 请求之后，应该就可以将 HTTP 请求发送给 Web 服务器了。然而，发送 HTTP 请求的目的是为了接收从服务器中返回的数据。从创建 XMLHttpRequest 对象开始，到发送数据、接收数据、XMLHttpRequest 对象一共会经历以下 5 种状态：
- 未初始化状态。在创建完 XMLHttpRequest 对象时，该对象处于未初始化状态，此时 XMLHttpRequest 对象的 readyState 属性值为 0。
- 初始化状态。在创建完 XMLHttpRequest 对象后使用 open() 方法创建了 HTTP 请求时，该对象处于初始化状态。此时 XMLHttpRequest 对象的readyState属性值为 1。
- 发送数据状态。在初始化 XMLHttpRequest 对象后，使用 send() 方法发送数据时，该对象处于发送数据状态，此时XMLHttpRequest 对象的 readyState 属性值为 2。
- 接收数据状态。Web 服务器接收完数据并进行处理完毕之后，向客户端传送返回的结果。此时，XMLHttpRequest 对象处于接收数据状态，XMLHttpRequest 对象的 readyState 属性值为 3。
- 完成状态。XMLHttpRequest 对象接收数据完毕后，进入完成状态，此时 XMLHttpRequest 对象的 readyState 属性值为 4。此时接收完毕后的数据存入在客户端计算机的内存中，可以使用 responseText 属性或 responseXml 属性来获取数据。
总的来说，readyState 属性的值有以下几种：
- 0 (未初始化) or (请求还未初始化)
- 1 (正在加载) or (已建立服务器链接)
- 2 (加载成功) or (请求已接受)
- 3 (交互) or (正在处理请求)
- 4 (完成) or (请求已完成并且响应已准备好)
只读属性 XMLHttpRequest.status 返回了 XMLHttpRequest 响应中的数字状态码。status 的值是一个无符号短整型。在请求完成前，status 的值为 0。值得注意的是，如果 XMLHttpRequest 出错，浏览器返回的 status 也为0：
- UNSENT（未发送） 0
- OPENED（已打开） 0
- LOADING（载入中） 200
- DONE（完成） 200
var xhr = new XMLHttpRequest();
console.log('UNSENT', xhr.readyState); // readyState 为 0
xhr.open('GET', '/api', true);
console.log('OPENED', xhr.readyState); // readyState 为 1
xhr.onprogress = function () {
console.log('LOADING', xhr.readyState); // readyState 为 3
};
xhr.onload = function () {
console.log('DONE', xhr.readyState); // readyState 为 4
};
xhr.send(null);
只有在XMLHttpRequest对象完成了以上5个步骤之后，才可以获取从服务器端返回的数据。因此，如果要获得从服务器端返回的数据，就必须要先判断XMLHttpRequest对象的状态：
const xhr = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// do something here
}
}
4. 发送HTTP请求
XMLHttpRequest.send(data);
结束
最后，附上一个简单的完整 AJAX 实例：
<button id="ajaxButton" type="button">Make a request</button>
<script>
var httpRequest;
document.getElementById("ajaxButton").addEventListener('click', makeRequest);
function makeRequest() {
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = alertContents;
httpRequest.open('GET', 'test.html');
httpRequest.send();
}
function alertContents() {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
alert(httpRequest.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
</script>
~
~
~ 本文完
~
学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！
大家好！我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！
知识与技能并重，内力和外功兼修，理论和实践两手都要抓、两手都要硬！
