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

Дата публикации  Дата изменения31.01.13  Комментарии53   Просмотры68320

Курсы

Ajax, просто и практично, ничего лишнего. Контент может быть любой: статичный, динамичный, текст, картинки, флэш, видео, аудио. Может послужить основой небольшого сайта.

Пример использования:

Между <head></head>:

<script> 
    function showContent(link) { 
        var cont = document.getElementById('content'); 
        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>

Между <body></body>:

<a href="#" onClick="showContent('page1.html')">Страница 1</a>
<a href="#" onClick="showContent('page2.html')">Страница 2</a>
<!--//-->
<div id="content">
    <!-- CONTENT -->
</div> 
<!--//-->
<div id="loading" style="display: none"> 
    Идет загрузка... 
    </div> 

 <script>
showContent('page1.html') // страница по умолчанию
</script>

  Размер:  6,61kB | Изменен: 31.01.13 | Загрузок: 3683
Бесплатные курсы

Категории: 

Теги: , ,

Оцените материал:

Рейтинг: 8.5/10 (54)

Схожие по тегам статьи

КомментарииКомментарии:

    Анатолий

     

    Скачал исходник, а он не работает. При чём уже на 5-ом сайте скачиваю исходники по этой теме, и не один не работает на компьютере.

    coder.hol.es /* Админ */

     

    Анатолий, если вы смотрели пример, и он у вас работает (а он 100% рабочий) – значит, вопрос не к исходнику, поскольку исходник содержит копию примера.

    Ахмед

     

    Здравствуйте. По вашему примеру, хочу сделать подгрузку контента без перезагрузки. Дело в том что я использую Select то есть список, и на форме есть кнопка "далее" input type = submit. При нажатии открывается обработчик, то есть страничка перезагружается и там нет списка. Но а если тип этой кнопки указываю как button то скрипт работает, и отоброжается обработчик, то только без данных. Можно ли сначала отправить данные обработчику, а потом инклудить обработчик?

    coder.hol.es /* Админ */

     

    Здравствуйте. Не совсем понял задачу – если вы используете обработчик PHP, то для передачи значений между js и php посмотрите, пожалуйста, эту статью:
    www.codeharmony.ru/materials/129#

    Юрий

     

    Скрипт действительно 100% рабочий. Решил его использовать на главной странице своего блога для создания стены))). Главная практически готова, но пока локально. Хотя сам скрипт нашел на другом сайте, на этом в нем еще указана страница по умолчанию, что мне и нужно было. Спасибо автору, а то сам в программировании чайник!

 

Старые →← Новые