Всем привет! =)
Сколько я пересмотрел разных CMS и просто сайтов!
И в них я к сожалению очень, и очень редко встречал AJAX навигацию...
А почему?!
Ведь AJAX навигацию это очень легко и полезно!
ПРИ ПРАВИЛЬНОМ ПОСТРОЕНИИ, она уменьшает трафик пользователя/сервера и собственно нагрузку на сервер.
В этой теме попрошу написать ПОЧЕМУ ВЫ НЕИСПОЛЬЗУЕТЕ/ИСПОЛЬЗУЕТЕ AJAX НАВИГАЦИЮ НА СВОИХ ПРОЕКТАХ?
P.S.: возможно тема не в том разделе, но я надеюсь модераторы не пощитают эту тему флудом/спамом )))
P.P.S.: для примера написал за несколько минут мини-пример AJAX навигации на ЧИСТОМ JavaScript
layout.php
[ <a class='ajax' href='index.php'>index</a> |
<a class='ajax' href='contacts.php'>contacts</a> |
<a class='ajax' href='about.php'>about</a> ]
<script type="text/javascript">
elem = document.querySelectorAll('a.ajax');
for (i=0; i<elem.length; i++){
elem[i].onclick = function(){ // перехват кликов по всех ссылках с классом ajax
var xhr = new XMLHttpRequest(); // собстенно сам ajax :)
xhr.open('GET', this.href + '?ajax=1', true); // ссылка вида [url]http://site.com/page.php??ajax=1[/url] для того чтобы получить только код без хедера, футера и менюшек
xhr.send(); // отправка запроса
xhr.onreadystatechange = function(){
if (xhr.readyState != 4) return;
if (xhr.status != 200){ // если статус не 200 - ОШИБКА
alert(xhr.status + ': ' + xhr.statusText);
}else{ // иначе вставляем полученый текст в div блок с id=content и class=content
document.querySelectorAll('div#content.content')[0].innerHTML = xhr.responseText;
}
}
document.querySelectorAll('div#content.content')[0].innerHTML = "<img src='anime.gif'>"; // пока происходит загрузка показываем прелоадер(или можно какой-то текст), эту строку можно просто удалить, она роли не играет =)
if(this.href != window.location){ // если текущий адрес не равен адресу ссылки по которой кликнули меняем его
window.history.pushState(null, null, this.href); // вместо history.pushState можно юзать хеш-навигацию
};
return false; // отменяем дефолтное действие(переход по ссылке)
};
};
function popstate(){ // функия срабатывает когда нажали кнопку "назад" или "вперед"
var xhr = new XMLHttpRequest(); // опять тоже самое что и вверху
xhr.open('GET', window.location + '?ajax=1', true); // я советую выделить даный код в одну функцию чтобы не писать его дважды
xhr.send(); // но просто у меня не было времени
xhr.onreadystatechange = function(){
if (xhr.readyState != 4) return;
if (xhr.status != 200){
alert(xhr.status + ': ' + xhr.statusText);
}else{
document.querySelectorAll('div#content.content')[0].innerHTML = xhr.responseText;
}
}
document.querySelectorAll('div#content.content')[0].innerHTML = "<img src='anime.gif'>";
}
if (window.addEventListener) // если браузер новый вешаем событие на кнопки "назад" и "вперед"
window.addEventListener('popstate', popstate, false);
else // если браузер старый ВСЕРАВНО вешаем событие на кнопки "назад" и "вперед" )))
window.onpopstate = document.onpopstate = popstate;
</script>
<div id="content" class="content"><?php echo $content; ?></div>
index.php
<?php
$content = 'index';
if (isset($_GET['ajax'])) {
echo $content;
} else {
include_once 'layout.php';
}
?>
about.php
<?php
$content = 'about';
if (isset($_GET['ajax'])) {
echo $content;
} else {
include_once 'layout.php';
}
?>
contacts.php
<?php
$content = 'contacts';
if (isset($_GET['ajax'])) {
echo $content;
} else {
include_once 'layout.php';
}
?>
От вас нужно только найти какой-то прелоадер и настроить шаблон )))