Как правильно подгрузить страницу в div при помощи AJAX?

Question

[Finx]

Доброго времени суток. Пытаюсь сделать на странице подгрузку страницы в блок по нажатии клавиши, но не могу понять почему не работает, буду очень благодарен если подскажете в чем дело.

function showAlbums(link) {  
  
        var cont = document.getElementById('contentBody');  
        var loading = document.getElementById('loading');  
  
        cont.innerHTML = loading.innerHTML;  
  
        var http = createRequestObject();  
        if( http )   
        {  
            http.open('get', link);  
            http.onreadystatechange = function ()   
            {  
                if(http.readyState == 4)   
                {  
                    cont.innerHTML = http.responseText;  
                }  
            }  
            http.send(null);      
        }  
        else   
        {  
            document.location = link;  
        }  
    }  

    function createRequestObject()   
    {  
        try { return new XMLHttpRequest() }  
        catch(e)   
        {  
            try { return new ActiveXObject('Msxml2.XMLHTTP') }  
            catch(e)   
            {  
                try { return new ActiveXObject('Microsoft.XMLHTTP') }  
                catch(e) { return null; }  
            }  
        }  
    }

На странице вывожу таким образом:

<?php
    echo ("<form> <input onclick=\"showAlbums('/albums.php?group=".$title."')\" type=\"button\" value=\"Смотреть\"></form>");
    echo("<center><div id=\"contentBody\"></div><div id=\"loading\" style=\"display: none\"><img src='/load.gif'></div></center>");
?>

Заранее благодарен за помощь!

Answer 1

[Антон Антон]

тут, конечно, ванильный js, но, например, в Jquery есть .load(), который делает что нужно. Можно в исходниках глянуть, что не так. Ну, или есть https://learn.javascript.ru/fetch и response.text(), который можно вставить как innerHTML в нужный элемент DOM

Comments

[Finx]

Что мне нравится в этом ванильном js, так это то, что можно в самом html задать адрес страницы и передать через него $_GET в php

[Антон Антон]

Finx: я ни в коем случае не запрещаю вам поступать также в предложенных мною способах.

[Антон Антон]

Finx: https://jsfiddle.net/zec1dzsq/4/

[Finx]

Антон Антон: Спасибо за скрипт, но при попытке вставить его на своем сайте, в консоле вываливается ошибка
Uncaught TypeError: Cannot read property 'innerHTML' of null
at showAlbums (index.php:4)
at HTMLInputElement.onclick (index.php:22)

[Антон Антон]

Finx: ну так надо немного подумать, прежде чем копипастить. Скрипт показывает работоспособность обоих методов. В качестве источника данных для вывода используется сервис "ЭХО" для jsfiddle, который требует данные, чтобы их же вернуть. Их я и беру из innerHTML элемента template. Для решения задачи из вопроса этот кусок не нужен.

[Finx]

Антон Антон: Вы абсолютно правы, всегда стремишься сперва скопипастить чужой код и только потом начинать разбираться если ответа никто не дал :)