使用AJAX改变内部HTML有什么好处？

Question

我有代码创建一个新的 XMLHttpRequest 来更改元素的 insidehtml 以切换页面。然而，我意识到简单地改变 insidehtml 的效果是完全相同的。所以我想知道，是否有任何理由使用 AJAX 而不是基本的 Javascript？

复杂的AJAX：

        function loadDoc(target, source) {
        const xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                target.innerHTML = this.responseText;
            };
        };
        xhttp.open("GET", source);
        xhttp.send();
        console.log("loaded ", source, " in ", target);
    };

基础JS：

element.innerhtml = index.html;

Answer 1

我不认为这是一个坏问题。可能没有经过深思熟虑，或者您认为 AJAX 不是 JavaScript 之类的一部分。

但是：

在同步和异步加载之间进行选择对于JavaScript中的Web应用程序性能和用户体验至关重要。同步加载按顺序执行任务，在外部内容检索期间阻止浏览器。虽然编程更简单，但它可能会导致用户体验不佳。异步加载通过允许并发任务执行来解决这个问题。这使得网页在内容加载时保持响应，提高了性能，但增加了代码复杂性。 ES6 中引入的 async 和 wait 简化了异步编程，使其成为响应速度和性能优势的首选方法。

同步加载：

在同步加载中，JavaScript 代码按顺序执行任务，一个接一个。这意味着浏览器必须等待一项任务完成才能开始下一项任务。如果任务涉及加载外部内容，例如来自服务器的图像或数据，则网页会有效地冻结，直到加载完成。

优点：

• 简单：同步加载更容易理解和编程，因为它遵循线性执行流程。
• 可预测性：任务执行的顺序是可预测的，从而更容易调试和理解代码行为。

缺点：

• 浏览器阻塞：网页在同步加载期间冻结，这可能会导致用户体验缓慢且无响应。
• 性能差：在内容较多的网站上，同步加载会对整体应用程序性能产生负面影响。

异步加载：

与同步加载相比，异步加载允许浏览器同时执行任务。这是通过使用回调或承诺来实现的，它们允许代码在等待加载任务完成时继续执行。这样，网页保持响应，用户可以与其交互，而不会遇到明显的延迟。

优点：

• 提高响应能力：异步加载避免浏览器阻塞，从而带来更流畅、响应更灵敏的用户体验。
• 提高性能：通过分配工作负载，异步加载可以显着提高 Web 应用程序的整体性能，尤其是在内容较多的网站上。

缺点：

• 复杂性增加：异步编程比同步编程更复杂、更难理解，特别是对于初学者开发人员而言。
• 错误处理：需要实施适当的错误处理，以确保 Web 应用程序在异步加载失败的情况下按预期运行。

一些历史：

JavaScript 中引入异步函数的时间相对较晚，ECMAScript 6 (ES6) 规范于 2015 年发布。在 ES6 之前，开发人员依靠回调和事件等机制来实现异步，导致代码更加复杂且难以维护。

ES6 中 async 和 wait 等关键字的引入显着简化了 JavaScript 中的异步编程。这些关键字允许开发人员以更具可读性和结构化的方式编写异步代码，类似于同步代码。

总而言之，异步加载因其在响应能力和性能方面的显着优势而成为在 JavaScript 中加载 Web 内容的首选方法。然而，在某些优先考虑简单性和可预测性的情况下，同步加载仍然很有用。选择同步还是异步加载取决于每个 Web 应用程序的具体要求。