Показать сообщение отдельно
  #1 (permalink)  
Старый 19.05.2015, 19:30
Аспирант
Отправить личное сообщение для Dark Surv Посмотреть профиль Найти все сообщения от Dark Surv
 
Регистрация: 16.03.2015
Сообщений: 43

ПОЧЕМУ ВЫ НЕИСПОЛЬЗУЕТЕ/ИСПОЛЬЗУЕТЕ AJAX НАВИГАЦИЮ НА СВОИХ ПРОЕКТАХ? - мини-опрос =)
Всем привет! =)
Сколько я пересмотрел разных 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';
}
?>


От вас нужно только найти какой-то прелоадер и настроить шаблон )))

Последний раз редактировалось Dark Surv, 19.05.2015 в 19:50. Причина: Заменил [CODE][/CODE] НА [JS][/JS], потому что не было видно форматирования
Ответить с цитированием