何为Ajax：
当今数字时代，互联网的发展让我们的网页愈发交互且动感十足。你是否曾想过这些令人惊艳的网页是如何实现的呢？答案之一就在于 Ajax（Asynchronous JavaScript and XML）技术。在本文中动手实现属于你自己的 Ajax 请求！
Ajax，这个听起来充满未知魔力的缩写，实际上代表了一种让网页实现异步数据交换的技术。通过 Ajax，我们能够在不刷新整个页面的情况下，动态地加载和更新数据，为用户提供更加流畅和即时的体验。
你是否曾想过，这些异步请求是如何工作的？只需一点前端魔法的指引，你也能够轻松掌握手写 Ajax 的技巧。
在本文中，我们将深入了解 Ajax 的工作原理，并通过实际动手的方式，逐步构建一个简单而强大的异步请求。
手写代码：
// 兼容性·IE6.0以前 现在没什么必要 IE -> Edge
const xhr =
XMLHttpRequest
? new XMLHttpRequest()
: new ActiveXObject('Microsoft.XMLHTTP')
xhr.open('GET', url, false)
// 宏任务 事件
xhr.onreadystatechange = function () {
if (xhr.readyState !== 4)
// 叼一下 表现一下 304 Not Modified 没有修改
if (xhr.status === 200 || xhr.status === 304) {
resolve(xhr.responseText);
} else {
rejecct(new Error(xhr.responseText))
}
}
xhr.send();
// onreadyStateChange
// setTimeout(() => {
// resolve('gigi')
// }, 1000)
})
};在这段代码中，主要完成了使用 XMLHttpRequest 对象进行同步（xhr.open('GET', url, false)）Ajax 请求的操作。让我逐步解释这段
代码：
- 创建 XMLHttpRequest 对象：
const xhr = XMLHttpRequest
? new XMLHttpRequest()
: new ActiveXObject('Microsoft.XMLHTTP');if (window.XMLHttpRequest) {
// 现代浏览器支持
XMLHttpRequest xhr = new XMLHttpRequest();
} else {
// 旧版 Internet Explorer 使用 ActiveXObject
xhr = new ActiveXObject('Microsoft.XMLHTTP'); }xhr.open('GET', url, false);- 这行代码使用 open 方法初始化 XMLHttpRequest 对象。它指定了请求的类型（GET）、URL 和是否使用异步（false 表示同步）。值得注意的是，同步请求在现代 web 开发中已不推荐使用，因为它可能会导致页面冻结，用户体验差，且在主流浏览器中逐渐被废弃。
- 监听 onreadystatechange 事件：
xhr.onreadystatechange = function () {
if (xhr.readyState !== 4)
if (xhr.status === 200 || xhr.status === 304) {
resolve(xhr.responseText);
} else {
reject(new Error(xhr.responseText))
}
};- onreadystatechange 事件是一个在 XMLHttpRequest 对象的 readyState 属性发生变化时触发的事件。readyState 属性表示请求的状态，其中 4 表示请求已完成。当 readyState 不等于 4 时，这段代码不执行任何操作，因为这表示请求仍在进行中。当 readyState 等于 4 时，表示请求已完成，进入这个条件分支。
在这个条件分支中，检查 xhr.status，它表示 HTTP 响应的状态码。状态码 200 表示成功，而 304 表示资源未被修改，可以从缓存中加载。如果状态码是 200 或 304，则将 Promise 置为成功状态，调用 resolve 函数，传递响应文本 (xhr.responseText)。如果状态码不是 200 或 304，则说明请求失败，将 Promise 置为拒绝状态，调用 reject 函数，并传递一个包含错误信息的新 Error 对象。讲到这里，我要提醒一下大家，在面试的过程中，当你的代码中出现状态码，那么请做好准备，面试官很有可能会把所有的HTTP状态码都问你一遍，这其实是好事，可以增加你在面试过程中的时间，帮你更轻松的度过面试死亡时间，因为比起面试官的其他问题，这个状态码简直不要太简单，希望大家有时间就看看，并没有多少。我在文章结尾会补充说明把状态码发出来，希望对你有所帮助。
- 发送请求：
- ini
- 复制代码
xhr.send();- 最后，使用 send 方法发送请求。
总体来说，这段代码是一个非常基础的使用 XMLHttpRequest 对象进行同步 Ajax 请求的例子。然而，现代的 web 开发更倾向于使用异步请求，通常使用 fetch 或类似的 API，因为它们提供更好的性能和用户体验。
总结：
在本文中，我们深入研究了 Ajax 技术的本质，揭示了它在现代前端开发中的不可或缺的角色。通过手写 Ajax，我们掌握了异步请求的核心概念，以及如何使用纯粹的 JavaScript 在网页上实现动态数据交换。
我们了解到，Ajax 不再是前端魔法师的专属工具，而是每个开发者都能够掌握的技能。通过实际动手的练习，我们发现了异步编程的奇妙之处，以及在网页交互中如何利用 Ajax 构建更加响应式和流畅的用户体验。
但这只是前端开发旅程的开始。在未来的学习中，你可以进一步探索现代工具和框架，如 Fetch API、Axios 等，它们提供了更强大和便捷的方式来处理异步请求。同时，深入理解 Promise 和 async/await 等概念将使你更加游刃有余地处理异步编程挑战。
无论你是初学者还是经验丰富的开发者，手写 Ajax 是一个深入理解前端技术根基的重要一步。希望本文能够激发你对前端开发的兴趣，并为你在这个令人兴奋的领域中迈出更大的步伐提供了坚实的基础。
感谢阅读，愿你在前端的旅途中不断探索、学习、创造，成为一位优秀的前端工程师！如果文章对你有所帮助，还望点个赞支持一下。
补充说明：HTTP状态码
HTTP 协议使用状态码（HTTP status codes）来表示请求的处理结果。状态码是服务器对客户端发起的请求的响应的一部分，它提供了关于请求处理成功与否、出现错误的信息。
以下是常见的 HTTP 状态码，它们不仅适用于 HTML，也适用于其他资源的请求：
- 1xx（信息）：
- 100 Continue：服务器已经接收到请求头，并且客户端应继续发送请求体。
- 2xx（成功）：
- 200 OK：请求成功。
- 201 Created：请求已经被实现，新资源已经依据请求的需要而建立。
- 204 No Content：服务器成功处理了请求，但没有返回任何内容。
- 3xx（重定向）：
- 301 Moved Permanently：被请求的资源已永久移动到新位置。
- 302 Found：被请求的资源在新的位置临时找到。
- 304 Not Modified：资源未被修改，可以使用缓存的版本。
- 4xx（客户端错误）：
- 400 Bad Request：服务器未能理解请求。
- 401 Unauthorized：请求要求身份验证。
- 403 Forbidden：服务器理解请求，但拒绝执行。
- 404 Not Found：服务器找不到请求的资源。
- 5xx（服务器错误）：
- 500 Internal Server Error：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。
- 502 Bad Gateway：作为网关或代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应。
- 503 Service Unavailable：服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。
编写你自己的Ajax：探索前端异步世界
原文链接：
https://juejin.cn/post/7311893415151517736