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

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

HIT

20.02.2016

2205

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>

Пример

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

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

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Варианты при вводе запроса в поиск

Варианты при вводе запроса в поиск

При вводе поискового запроса удобно чтобы сразу выводились несколько вариантов с ссылками на страницы с искомым словосочетанием. Реализуем это минимальными действиями. Подлючение скрипта и стилей Подключаем все необходимые стили и Читать далее »

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

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

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

Загрузка JavaScript динамически

Загрузка JavaScript динамически

Иногда требуется подгрузить скрипт на лету, в этом поможет технология Ajax. Обычный скрипт JavaScript динамически Создаем файл скрипта script-dinamic.js с содержимым // случайное число от 1 до 100 var rnd Читать далее »

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

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

  1. Аватар
    Дмитрий

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

    1. Alexandr
      Alexandr

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

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