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

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

Курсы

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

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

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

01<script>
02    function showContent(link) {
03        var cont = document.getElementById('content');
04        var loading = document.getElementById('loading');
05        cont.innerHTML = loading.innerHTML;  
06        var http = createRequestObject();
07        if( http ) 
08        { http.open('get', link);
09            http.onreadystatechange = function () 
10            {   if(http.readyState == 4) 
11                {   cont.innerHTML = http.responseText;  }    }
12            http.send(null);  }
13        else 
14        {  document.location = link;   }   }
15    // ajax объект
16    function createRequestObject() 
17    try { return new XMLHttpRequest() }
18        catch(e) 
19        try { return new ActiveXObject('Msxml2.XMLHTTP') }
20            catch(e) 
21            {   try { return new ActiveXObject('Microsoft.XMLHTTP') }
22                catch(e) { return null; }   } } }
23</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> 
1<script>
2showContent('page1.html') // страница по умолчанию
3</script>

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

Категории

Теги: , ,

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

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


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

    Oles

     

    Спасибо, очень полезная информация :)

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

     

    Пожалуйста =)

    Игорь

     

    Пример классный.. но но как тогда оптимизировать страничку, если текста нет вообще в исходнике((

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

     

    Для этого нужно что-то для индексации и оптимизации поместить на эту страничку) Кроме того, когда смотрится исходник, страница по умолчанию подгружена, вроде как.

    Андрей

     

    У меня не работает, причину указать не могу, все файлы созданы, ссылка нажимается, контент не загружается
    Пример работает – исходники нет
    Может быть что из-за того, что файлы не на сервере?
    P.S. Я чайчник


 

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