/ Scripts & jquery / Загрузка контента без перезагрузки

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

HIT

20.02.2016

5634

2

Подгрузка контента средствами 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>

Пример

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

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

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

  • Похожие записи
  • Комментарии
  • Вложения
Отложенная загрузка изображений

Отложенная загрузка изображений

Если на странице есть несколько изображений или есть изображения дублирующиеся на всех страницах (header, footer), то чтобы ускорить общую загрузку сайта, можно установить для изображений отложенную загрузку. Изображение будет появляться Читать далее »

Имитация Ajax загрузки контента

Имитация Ajax загрузки контента

Создадим эффект перехода внутри сайта имитирующий подгрузку контента ajax’ом, как будто без перезагрузки. Принцип эффекта: при переходе по ссылке плавно скрываем изменяемую часть контента, и при загрузке новой плавно ее Читать далее »

Открывать запись во всплывающем окне

Открывать запись во всплывающем окне

Задача: открывать запись во всплывающем окне используя загрузку «налету» (ajax). При этом работает сколько угодно раз, т.е. при нажатии на каждую ссылку — загружается соответствующая запись по ID из ссылки. Читать далее »

Добавить комментарий

2 комментария

  1. Дмитрий

    Спасибо за пример. но такой вопрос как прописать данный код на сайте wordpress, потому что выводятся 2 шапки и 2 подвала при данной вариации кода

    1. Alexandr

      Я записал и пробовал этот код в тестовых целях. У меня есть задача на перспективу — сделать сайт WP полностью на ajax. Но в последнее время этим некогда заниматься.

Загрузка контента без перезагрузки
Субкатегории в категориях Woocommerce
Рекомендации для васСубкатегории в категориях WoocommerceOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.