Загрузка контента без перезагрузки

Подгрузка контента средствами Ajax

Создаем тестовую верстку

<p>Какую страницу желаете открыть?</p>

<form>
<input onclick="showContent('https://opttour.ru/main-rublik/sites/fotofit/')" type="button" value="Страница 1">
<input onclick="showContent('https://opttour.ru/main-rublik/sites/dtex/')" type="button" value="Страница 2">
</form>

<div id="contentBody"></div>

<div id="loading" style="display: none">
Идет загрузка...
</div>

Скрипт

<script>
function showContent(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;
}
}

// создание ajax объекта
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; }
}
}
}
</script>

Загрузить можно конкретную страницу или файл php (нужно указать путь до него)

Скрипт

<script>  
    function showContent(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;  
        }  
    }  
  
    // создание ajax объекта  
    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; }  
            }  
        }  
    }  
</script>

Пример

Загрузка контента без перезагрузки страницы

Какую страницу желаете открыть?

Поделиться в соц. сетях: