懸停時預加載頁面，點擊時鏈接

Question

我正在嘗試在鼠標懸停在按鈕上時使用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解決方案

Answer 1

您將需要一些框架來精簡頁面內容並管理URL中的內容， 而無需向服務器發送另一個請求並重新加載頁面。

推送狀態可以幫助進行URL操作。

當您通過AJAX從服務器收到部分HTML時，您需要替換頁面的正文（或更少，取決於您的標記，也許只是#container所有內容或頁面上的任何內容）。

研究一下Rails的TurboLinks之類的東西如何使用一種稱為PJAX的方法來快速瀏覽頁面。 然后，懸停時的預取可以在這樣的方法之上分層。

更多閱讀： http : //pjax.herokuapp.com/