使用单个HTML页面替换a的innerHTML是不好的做法 with many other pages?

Question

我正在编写一个基本的API文档站点，并且在我的API中有大约20个端点。我选择了一个HTML页面，旁边有一个显示副标题的导航栏，每个页面都有一个包含相关端点的列表，例如：

Home
    About this API

Users
    Get users
    Add users
    Delete users

Products
    ...

默认情况下，会突出显示“about this api”，并将其本地HTML页面读入侧栏右侧的空div。

window.onload = function () {

    // Default page
    addContent("content/api/about_api.html", "content");
};

function addContent(page, element) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", page, true);
    xhr.onreadystatechange = function () {
        document.getElementById(element).innerHTML = this.responseText;
    };
    xhr.send();
}

单击列表元素时，突出显示将移至该选项，并使用新页面调用相同的函数，该新页面将作为数据属性存储在元素中。

一切都很好，反应灵敏，但我想知道这是不是很糟糕的做法？你会推荐一种不同的方法吗？

Answer 1

实践并不坏，实际上它很安静，被称为单页应用程序。

但是有一些方面需要考虑，例如如果您不想正确索引SPA，那么搜索引擎的可访问性。虽然有很多关于SPA的文章和教程，我建议你阅读它们。

Answer 2

作为初步回应，我会说，这是错误的，

想想基础知识，html是骨架，css是设计，js是功能。你不应该试图混淆它们。如果您没有运行服务器，我可以看到您选择此方法的原因。请阅读服务器端渲染和把手，如果你得到它们，你会很快理解你的问题