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

представте себе ситуацию:
бот-паук заходит на сайт, считывает все ссылки на странице(возможно не все я точно не знаю),
так как бот НЕ УМЕЕТ ИСПОЛЬЗОВАТЬ JAVASCRIPT(я читал на хабре что новый бот яндекс уже умеют или учится), он заходит по ссылке http://suite.com/about.php БЕЗ ЗАГРУЗКИ АЯКСОМ А ПРОСТО КАК БУДТО ИЗ ЗАКЛАДКИ и индексирует эту страницу

это просто индикатор что страницу нужно отдать без шапки, футера, менюшек, как говорил можно и через POST "ajax: true", а можно и через через хедер, так что сайт ПРОИНДЕКСИРУЕТСЯ НОРМАЛЬНО

Dark Surv,

Вы хотите, различая какой был запрос асинхронный или же нет, выдавать или урезанное, или полное содержимое?

Уж тогда проще "ботов имеющих" вес определять и можно даже посредством htaccess подсовывать им статику без всяких JS, CSS, пусть индексируют, чем париться с url.

я имел в виду на простых сайтах, и на новых сайтах, где еще есть шанс все исправить,
например к джумле и друпале есть плагины аякс навигации, для вордпреса не встречал,
а для "крупных древних CMS с большим количеством говнокода" я не знаю что делать...

ДА! а потом асинхронно загруженые даные подменить в определенном div блоке =)
взгляните на мой мини-пример навигации, я думаю вы поймете в что я имел ввиду =)
он отлично индексируется.
Эту навигацию будет не тяжело поставить на ЛЮБУЮ ЦМС когда в админа прямые руки))) даже на старую, говнокодовую ЦМС
Аякс навинация - это добро в любом случае(если ее можно как-то поставить на сайт)

Да не надо мне примеров :)
Я делал индексацию для однострочников, это еще терпимо. Где еще можно, типа блогов и прочей...
Но вот когда содержание, это и масса условий и по выборке, и по выдаче, да еще ее надо будет с учетом кто запросил и что кому отдать... Да это геморрой полнейший :)

А вот административный раздел, да тут полностью можно на Ajax запросах, и мало того, вообще иметь шаблоны страниц на клиенте, а с сервером общаться только "голыми" данными.

Всем кто отписался БОЛЬШОЕ СПАСИБО!
Я хотел узнать сколько людей используют аякс навигацию, и почему ОЧЕНЬ-МНОГО людей ее не используют...
Я провожу даный опрос уже не первый раз(я проводил опрос по многих сайтах),
И я получил ответ - много людей не знают про ее существование(в основном новички),
А из тех кто знает о ней, много людей думают что аякс навигация не дает сайту индексироваться,
НО ЭТО НЕ ТАК!!! Конечно, если навигацию построить неправильно, она не даст проиндексировать сайт,
Но пример который я привел - ИНДЕКСИРУЕТСЯ НА ВСЕ 100% АБСОЛЮТНО БЕЗ ПРОБЛЕМ!!!
А используют аякс навигацию в основном ПРОФЕСИОНАЛЫ(бывает и новички, если найдут где-то в инете пример),
И это сожалению очень досадная правда...
В основном професионалы... И таких к сожалению мало...
Опрос проводил для Вас и Себя 14-ти летний программист Костян, с полгодом опыта программирования =)
Спасибо за внимание!

Это не так. Когда-то да, с этим были проблемы, теперь нет. Содержание содержанию рознь. Нельзя все под одну гребенку, займитесь крупным проектом, сделайте, а потом будете судить о профессионалах использующих Ajax.

если вы не почитали - я написал про професионалов отдельно, что они наоборот используют аякс

МНЕ 14 ЛЕТ, Я ДУМАЮ РАНОВАТО РАБОТАТЬ В КРУПНЫХ ПРОЕКТАХ

Ну а я о чем говорю? Есть масса профессионально сделанных сайтов, и на которых Ajax выполняет совсем не задачи "подгружать контент", а те, что действительно целесообразно выполнять ему. Но это не означает, что их писали непрофессионалы совсем не понимающие прелестей асинхронного обмена с сервером.

Именно потому что профессионалы, поэтому и не кидаются в крайности. Так что не надо считать "поголовье" по процентной загрузке Ajax на сайте. :)

14 лет, но тем не менее сделать вывод о "плохих" и "хороших" парнях пишущих сайты, не имея опыта за плечами можно? )

Я думаю Вы поняли что я имел в виду)))

как-то сделел с трудом вывод(может частично ошибочный)
для меня главное было определиться - НУЖНА ЛИ АЯКС НАВИНАЦИЯ В МОЕЙ ЦМС, я понял - НУЖНА!!!
Плюс еще узнать процент использования аякса на сайтах(не только навигации)
полгода - тоже опыт)))

Я думаю, что в 14 лет надо бы научится уже уважать собеседников своих, с вами могут общаться люди гораздо старше вас, и не всем будет приятно "тыканье". Мне не в Америке, у нас на вы к собеседнику, как уважительное. :)
Так что с этим поосторожнее на форумах, можно напороться на неприятности.

Насчет "тех кто думает, что думают, а руки не могут..." - да все давно знают об индексации, что предлагают боты для нее. Вот только разделять вывод всего контента на "наших" и "не наших", это не всегда удобно будет. Одно дело вывести пусть и кучу параграфов на страницу, совсем другое дело вывести страницу, на которой в свою очередь масса динамического контента.

И какие тут могут быть сложности, это нужно понимать.

я начал с Вами(и с другими собеседниками) на "Вы", а потом резко перешел з Вами на ты, извините...
Спасибо за замечание)))
Я за 4 месяцы частично выучил PHP, за 2 месяцы подучил JavaScript, теперь надо в основном переходить на практику(раньше было 50%50), сейчас надеюсь будет как минимум 85%15(практики больше за теорию)

Вот как займетесь практикой, вот тогда и проверите свои выводы. А в настоящее время погрешность в вашем опросе 99.99% :)

Вот тут посмотреть сайты и поучится тому как грамотно и соответственно задачам используется Ajax.

Dark Surv,
Конечно же нет. Эта навигация просто заменяет готовый кусок вёрстки и всё. Для сложных решений это вряд ли подойдёт.

Точно-точно, именно так. Когда юзаю AJAX сразу ощущаю какой я профи и ощущаю свою принадлежность к элите!

С 9 лет работаю в крупных проектах, мне норм. Уже два года опыта наработал.

laimas,
я - не уважающее других быдло :cray:

Ну почему же, я например использую по возможности везде. Но опять же от заказчиков зависит.

Не стоит выставлять свою субъективщину за истину. Не всем приятно выканье.

По теме...
Правильная ajax-навигация, например, реализована на гитхабе: удобно и поисковикам, и юзерам. Вообще, достаточно соблюдать одно простое правило: сайт должен быть полностью работоспособен с выключенным JS. Любой раздел, который отдается по ajax, должен иметь реальный адрес; навигация должна происходить по реальным ссылкам, JS лишь перехватывает клики по ним и вместо полной перезагрузки страницы тащит голый контент.

:) Не обязательно. Форумов много, и как всегда на каждом из них складывается свой "макроклимат". Неужто не разу не встречались баталии, поводом которых как раз и было обращение? А вот я был свидетелем подобных сцен, поэтому и предупредил отрока. )

я с вами согласен, но сейчас очень-мало людей с отключеным JavaScript(но лично я - использую NoScript(он блокирует все Java, *.SWF, JavaScript и другие - https://noscript.net))
PS: хорошим примером сайта что работает на аяксе есть мобильная версия ВК, зайдите на https://m.vk.com и посмотрите, и при этом сайт отлично работает с выключеными скриптами

Дело не в людях без JS. Дело в ботах (тех же поисковиках) - это во-первых, а во вторых, в любом случае надо разделять ответственности.
HTML должен только нести информацию. CSS должен только украшать. JS должен только добавлять интерактивности, удобства.

простое, говоришь? :D

в этом случае сайт должен уметь отдавать как json так и html, что удваивает объем работы, если это не изоморфное приложение
лично я сомневаюсь, что в сети повсюду изоморфные сайты

про редиректы не забыли? :)

тема - вброс

если сначала построить сайт что бы он работал АБСОЛУТНО БЕЗ JS, а потом понемногу добавлять интерактивности - то это простоэто конечно же правильный ответ =)
И по этому сайт должен работать без JS

Можно чекать кастомный заголовок/content-type и отдавать уже отрендеренный шаблон контента, просто без лэйаута (как и реализовано на гитхабе).

А что с ними?