编写你自己的Ajax:探索前端异步世界

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

  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))
            }
    };
    

    onreadystatechange 事件是一个在 XMLHttpRequest 对象的 readyState 属性发生变化时触发的事件。readyState 属性表示请求的状态,其中 4 表示请求已完成。当 readyState 不等于 4 时,这段代码不执行任何操作,因为这表示请求仍在进行中。当 readyState 等于 4 时,表示请求已完成,进入这个条件分支。

在这个条件分支中,检查 xhr.status,它表示 HTTP 响应的状态码。状态码 200 表示成功,而 304 表示资源未被修改,可以从缓存中加载。如果状态码是 200304,则将 Promise 置为成功状态,调用 resolve 函数,传递响应文本 (xhr.responseText)。如果状态码不是 200304,则说明请求失败,将 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 作者:追梦前行

(0)
上一篇 2023年12月14日 上午10:32
下一篇 2023年12月14日 上午10:42

相关推荐

发表回复

登录后才能评论