何为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 开发中已不推荐使用，因为它可能会导致页面冻结，用户体验差，且在主流浏览器中逐渐被废弃。

1. 监听 onreadystatechange 事件：

xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4)
        if (xhr.status === 200 || xhr.status === 304) {
            resolve(xhr.responseText);
        } else {
            reject(new Error(xhr.responseText))
        }
};

1. 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