ПОЧЕМУ ВЫ НЕИСПОЛЬЗУЕТЕ/ИСПОЛЬЗУЕТЕ 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';
}
?>

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

Использую потому что:

1. Меньше нагрузки на сервер.
2. Меньше нагрузки на клиент (так как будет обновляться только контент).
3. Можно спокойно делать такие вещи, как аудиоплеер, который не будет при переходе по ссылкам выключаться.

P.S.:

if (window.addEventListener)
  window.addEventListener('popstate', popstate, false);
else
  window.onpopstate = document.onpopstate = popstate;

addEventListener есть везде, кроме IE < 9, а там события onpopstate нет. Так что, твой if тут не нужен:

if('history' in window) {
    window.addEventListener('popstate', function() {
         ajaxLoad(this.location.href);
    });
}

А как индексация содержимого? Чтобы такое содержание индексировалось и у Яндекс, и у Гугла оговаривается соблюдение правил, иначе...

Предоставленый мной пример ПРОИНДЕКСИРУЕТСЯ ТОЧНО ТАКЖЕ КАК И БЕЗ АЯКСА!!!

Я не хочу с Вами спорить, НО!!!

if (window.addEventListener)
  window.addEventListener('popstate', popstate, false);
else
  window.onpopstate = document.onpopstate = popstate;

Правильнее чем ваш вариант, потому что в старых версиях IE события делигируются почти как в нормальных браузерах, только событие делигируется не window.addEventListener(NAME), а window.onNAME = ""

Если не внрите проверте в 8 осле вот этот НЕКРАСИВЫЙ код (НЕКРАСИВЫЙ потому что я его набросал по быстрому с разных файлов)))

[ <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 src="history.ielte7.js"></script>
<script src="jquery-1.11.3.min.js"></script>

<script>
// history.ielte7.js - это полифил от Devote - [url]https://github.com/devote/HTML5-History-API[/url]

$(function() {
        var location = window.history.location || window.location;

        $(document).on('click', 'a.ajax', function() {
          history.pushState(null, null, this.href);
          return false;
        });

if (window.addEventListener)
  window.addEventListener('popstate', popstate, false);
else
  window.onpopstate = document.onpopstate = popstate;

	  
function popstate(){
  alert("Мы вернулись на страницу со ссылкой: " + location.href);
}


});
</script>

<div id="content" class="content"><?php echo $content; ?></div>

За счет window.location + '?ajax=1 ? )

Использую.

Для кого легко? В домашних страничках, лендингах и им подобных - легко, а в крупных древних CMS с большим количеством говнокода, добавление нормальной AJAX-навигации несколько осложнено.

Я понимаю. Я Вам про другое говорю, в IE8 не поддерживается History API, так что вешать onpopstate смысла не имеет.
https://developer.mozilla.org/en-US/...vents/popstate

Я у себя в POST отправлял ajax: true. :) И на сервере проверял, если есть этот параметр в POST, то шапку и футер не генерируем, а выводим только контент, который будет обработан JS и просто банально заменён.

Кстати, можно и без ajax: true, можно просто определить, что это ajax запрос, не помню как, но точно можно.

Да, там смысла нет, так как не получится на стороне сервера что-то отдельно генерировать. Считай, что всю страницу берёшь скриптом и просто заменяешь.
Вообще не люблю CMS, столько де*ьма лишнего. Лучше свою написать, хоть это и по времени намного больше, но зато на душе спокойней.

Ну причем тут true ) Робот индексирует содержание которое загружается страницей, а не щелкает по кнопкам выполняя запросы к серверу. На момент загрузки страницы того что будет помещаться после запроса к серверу нет, и робот это содержание не проиндексирует.

Вот поэтому и меняют url, что в свете HTML5 стало удобным, но при этом этот url должен быть построен по оговоренному правилу, из которого робот может получить адрес на статическую страницу содержимого, которое загружалось Ajax.

https://help.yandex.ru/webmaster/rob...x-indexing.xml

Какой смысл в индексации url, которые можно конечно подставить, если их куча будут иметь одно и тоже содержание (нет индексации динамического контента? Так и бан схлопотать можно. )

PS. Safort правильно говорит, для однострочников это еще нормально, но в крупном проекте больше геморроя для разработчика, чем удобств для пользователя.

Определить что это аякс запрос еще можно по хедерах(например JQuery отправляет хедер 'X-Request-With', а в чистом js хедер можно поставить любой)))
а полифил от полифил от Devote зачем? =) https://github.com/devote/HTML5-History-API