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

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

HIT

20.02.2016

7076

3

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

Пример

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

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

[site-socialshare]
  • Похожие записи
  • Комментарии
  • Вложения
Подгрузка постов «налету» I: Скроллинг

Подгрузка постов «налету» I: Скроллинг

Добавляем на сайт функционал подгрузки постов «налету». Данная технология применяется в соц. сетях, а также крупных интернет-магазинах. В funсtion.php // Добавляем подгрузку постов function true_loadmore_scripts() { wp_enqueue_script('jquery'); // скорее всего Читать далее »

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

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

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

Избранное

Избранное

Реализуем функционал Избранное. Нам надо сделать кнопку добавить в Избранное в шаблоне самой записи и в цикле вывода записей категории. И отдельная страница Избранное где выводятся избранные записи. Плагин Favorites Читать далее »

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

Notice: Функция WP_Styles::add вызвана неправильно. Стиль с дескриптором "editor-buttons" был поставлен в очередь с незарегистрированными зависимостями: dashicons. Дополнительную информацию можно найти на странице «Отладка в WordPress». (Это сообщение было добавлено в версии 6.9.1.) in /home/t/tiberi6w/opttour.ru/public_html/wp-includes/functions.php on line 6260

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

  1. Дмитрий

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

    1. Alexandr

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

  2. bonabo

    И все бы хорошо, но в загружаемых с помощью этого кода страницах  не работают никакие html скрипты:(

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