Javascript 悬停时预装页面，单击时链接

我正在尝试一种可能性，即使用ajax在鼠标悬停在一个按钮上预加载一个页面，并在点击该按钮后使该页面更快地可用。我刚刚开始，并没有找到一个很好的解决方案/可能完全错了。以下是我尝试过的，看起来对我来说是一个小小的承诺：

document.getElementById('link').addEventListener('mouseover',function() {
    var r = new XMLHttpRequest();
    r.open("POST", "index.php", true);
    r.onreadystatechange = function () {
        if (r.readyState != 4 || r.status != 200) return;
         document.getElementById('link').addEventListener('click',function() {
            window.location.assign('index.php');
        });
    };
    r.send('');
});

但我不认为这样做

有没有人能在不共享代码/解决方案的情况下为我指出一个方向？我主要感兴趣的是如何自己实现这一点——ajax是正确的开始方式吗

---

我正在寻找一个只使用javascript的解决方案

您需要一个框架，以便在不向服务器发送另一个请求和重新加载页面的情况下，对页面内容进行子绑定并管理URL中的内容

可以帮助URL操作

当您通过AJAX从服务器收到部分HTML时，您需要替换页面主体（或者更少，具体取决于您的标记，可能只是

#容器

内的所有内容，或者页面上的任何内容）

看看Rails是如何使用一种称为

PJAX

的方法快速浏览页面的。然后悬停时的预取可以在这样的方法之上分层

更多阅读：