Živá ukázka

Výsledek

HTML

Autoformát
Standardní režim
Mobilní zobrazení

CSS

Autoformát
CSS reset
Až na konci

var pripravenaData, prejit;
var obsah = document.getElementById("obsah");
var prednacteni = document.getElementById("prednacteni");

function nacist(url) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (prejit) {
                obsah.innerHTML = xhr.responseText;
                prejit = false;
            } else {
                prednacteni.innerHTML = xhr.responseText;
                pripravenaData = true;
            }
        }
    };
    xhr.open('GET', url);
    xhr.send();
}

var proAjax = document.querySelectorAll(".ajax");
for (var i = proAjax.length; i--;) {
    proAjax[i].onmousedown = function() {
        pripravenaData = false;
        nacist(this.getAttribute("data-url"));
    };
    proAjax[i].onmouseup = function() {
        if (pripravenaData) {
            obsah.innerHTML = prednacteni.innerHTML;
            prednacteni.innerHTML = "";
            pripravenaData = false;
            prejit = false;
        } else {
            prejit = true;
        }
    }
}

JS

Autoformát
jQuery
Umístění JS