Ajax + eventos: ejemplo rapido...

[UlisesGascon]

    function peticionAjax(url, callback) {
        var xmlHttp = new XMLHttpRequest();

        xmlHttp.onreadystatechange = function() {

            if (xmlHttp.readyState === 4) {
                var respuestaCrudo = xmlHttp.responseText
                var respuesta = JSON.parse(respuestaCrudo)
                var codigo_de_estado = xmlHttp.status

                if(codigo_de_estado === 200) {
                    console.log(respuesta);
                    callback(respuestaCrudo);
                } else {
                    console.error("ERROR!", codigo_de_estado);
                }

            }

        };

        xmlHttp.open("GET", url, true);
        xmlHttp.send();
    }

    document.body.addEventListener("click", function(){
        document.body.innerHTML="Cargando...."
        peticionAjax("http://api.rtve.es/api/videogalerias.json", function (datos){
            document.body.innerHTML= "<p>"+datos+"</p>"
        });

    })

    document.body.innerHTML="¡Esto es el texto por defecto!"

[UlisesGascon]

    function peticionAjax(url, callback) {
        var xmlHttp = new XMLHttpRequest();

        xmlHttp.onreadystatechange = function() {

            if (xmlHttp.readyState === 4) {
                var respuestaCrudo = xmlHttp.responseText
                var respuesta = JSON.parse(respuestaCrudo)
                var codigo_de_estado = xmlHttp.status

                if(codigo_de_estado === 200) {
                    console.log(respuesta);
                    callback(respuesta);
                } else {
                    console.error("ERROR!", codigo_de_estado);
                }

            }

        };

        xmlHttp.open("GET", url, true);
        xmlHttp.send();
    }

    document.body.addEventListener("click", function(){
        document.body.innerHTML="Cargando...."
        peticionAjax("http://api.rtve.es/api/videogalerias.json", function (datos){

            console.log("Tenemos:", datos.page.items.length)
            var htmlFinal = "<ul>"
            datos.page.items.forEach(function(elemento, vuelta){
                htmlFinal += "<li>"+elemento.longTitle+" ("+elemento.popularity+")</li>"
                console.log(vuelta+":", htmlFinal);
                //elemento.longTitle
                //elemento.popularity
            })
            htmlFinal += "</ul>"
            console.log("Total:", htmlFinal);
            document.body.innerHTML= htmlFinal

        });

    })

    document.body.innerHTML="¡Esto es el texto por defecto!"