何为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'); }这里使用了三元运算符来检测浏览器是否支持
XMLHttpRequest对象,当然也可以使用if判断的方式。如果支持，就创建一个新的XMLHttpRequest对象；否则，使用ActiveXObject('Microsoft.XMLHTTP')来创建对象，适配一些较旧的浏览器。其实对于现在绝大多数浏览器中，基本不会存在不支持XMLHttpRequest的情况，所以上面那份代码其实是可以不写的。但在面试的过程中，手写Ajax对于我们来说是必备的，当然其他面试者一样如此，所以可以加入上面的代码，告诉面试官你是为了避免出现由于旧版浏览器不支持XMLHttpRequest使得Ajax无法实现,加入一个判断，用于避免这种情况。这样一来，你就比其他面试者更具优势，面试官也会更容易记住你。 -
初始化 XMLHttpRequest 对象：
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状态码都问你一遍，这其实是好事，可以增加你在面试过程中的时间，帮你更轻松的度过面试死亡时间，因为比起面试官的其他问题，这个状态码简直不要太简单，希望大家有时间就看看，并没有多少。我在文章结尾会补充说明把状态码发出来，希望对你有所帮助。
-
发送请求：
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：服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。
原文链接：https://juejin.cn/post/7311893415151517736 作者：追梦前行
