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

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

HIT

20.02.2016

6971

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]
  • Похожие записи
  • Комментарии
  • Вложения
Выбор города пользователя

Выбор города пользователя

Создадим модуль выбора города пользователя, на основе которого, будем менять некоторые аспекты сайта. Автоматически определяем и сохраняем город в SESSION Автоматически определяем город (в основу которого легло решение от Яндекс). Читать далее »

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

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

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

Подгрузка отдельных блоков на странице

Подгрузка отдельных блоков на странице

Прочитал в одной из статей — как подгружать методом ajax целые куски кода, в том числе и php. Сам метод действительно оказался прост. В данной статье опишем ситуации где этот Читать далее »

/

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

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 6170

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

  1. Дмитрий

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

    1. Alexandr

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

  2. bonabo

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

Загрузка контента без перезагрузки
Быстрое редактирование записи (Quick edit)
Рекомендации для васБыстрое редактирование записи (Quick edit)Opttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.