何为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 作者:追梦前行