19.05.2015, 19:30
|
Аспирант
|
|
Регистрация: 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], потому что не было видно форматирования
|
|
19.05.2015, 19:43
|
|
Профессор
|
|
Регистрация: 30.04.2012
Сообщений: 3,018
|
|
Использую потому что:
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);
});
}
Последний раз редактировалось ruslan_mart, 19.05.2015 в 19:45.
|
|
19.05.2015, 20:23
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Сообщение от Dark Surv
|
И в них я к сожалению очень, и очень редко встречал AJAX навигацию...
|
А как индексация содержимого? Чтобы такое содержание индексировалось и у Яндекс, и у Гугла оговаривается соблюдение правил, иначе...
|
|
19.05.2015, 20:25
|
Аспирант
|
|
Регистрация: 16.03.2015
Сообщений: 43
|
|
Предоставленый мной пример ПРОИНДЕКСИРУЕТСЯ ТОЧНО ТАКЖЕ КАК И БЕЗ АЯКСА!!!
|
|
19.05.2015, 20:29
|
Аспирант
|
|
Регистрация: 16.03.2015
Сообщений: 43
|
|
Я не хочу с Вами спорить, НО!!!
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>
Последний раз редактировалось Dark Surv, 19.05.2015 в 20:34.
|
|
19.05.2015, 20:31
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
За счет window.location + '?ajax=1 ? )
|
|
19.05.2015, 20:38
|
|
Профессор
|
|
Регистрация: 23.12.2013
Сообщений: 1,856
|
|
Использую.
Цитата:
|
Ведь AJAX навигацию это очень легко и полезно!
|
Для кого легко? В домашних страничках, лендингах и им подобных - легко, а в крупных древних CMS с большим количеством говнокода, добавление нормальной AJAX-навигации несколько осложнено.
|
|
19.05.2015, 21:07
|
|
Профессор
|
|
Регистрация: 30.04.2012
Сообщений: 3,018
|
|
Сообщение от Dark Surv
|
Я не хочу с Вами спорить, НО!!!
|
Я понимаю. Я Вам про другое говорю, в IE8 не поддерживается History API, так что вешать onpopstate смысла не имеет.
https://developer.mozilla.org/en-US/...vents/popstate
Сообщение от laimas
|
За счет window.location + '?ajax=1 ? )
|
Я у себя в POST отправлял ajax: true. И на сервере проверял, если есть этот параметр в POST, то шапку и футер не генерируем, а выводим только контент, который будет обработан JS и просто банально заменён.
Кстати, можно и без ajax: true, можно просто определить, что это ajax запрос, не помню как, но точно можно.
Сообщение от Safort
|
Для кого легко? В домашних страничках, лендингах и им подобных - легко, а в крупных древних CMS с большим количеством говнокода, добавление нормальной AJAX-навигации несколько осложнено.
|
Да, там смысла нет, так как не получится на стороне сервера что-то отдельно генерировать. Считай, что всю страницу берёшь скриптом и просто заменяешь.
Вообще не люблю CMS, столько де*ьма лишнего. Лучше свою написать, хоть это и по времени намного больше, но зато на душе спокойней.
Последний раз редактировалось ruslan_mart, 19.05.2015 в 21:10.
|
|
19.05.2015, 21:29
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Сообщение от Ruslan_xDD
|
Я у себя в POST отправлял ajax: true. И на сервере проверял, если есть этот параметр в POST, то шапку и футер не генерируем, а выводим только контент, который будет обработан JS и просто банально заменён.
|
Ну причем тут true ) Робот индексирует содержание которое загружается страницей, а не щелкает по кнопкам выполняя запросы к серверу. На момент загрузки страницы того что будет помещаться после запроса к серверу нет, и робот это содержание не проиндексирует.
Вот поэтому и меняют url, что в свете HTML5 стало удобным, но при этом этот url должен быть построен по оговоренному правилу, из которого робот может получить адрес на статическую страницу содержимого, которое загружалось Ajax.
https://help.yandex.ru/webmaster/rob...x-indexing.xml
Какой смысл в индексации url, которые можно конечно подставить, если их куча будут иметь одно и тоже содержание (нет индексации динамического контента? Так и бан схлопотать можно. )
PS. Safort правильно говорит, для однострочников это еще нормально, но в крупном проекте больше геморроя для разработчика, чем удобств для пользователя.
Последний раз редактировалось laimas, 19.05.2015 в 21:34.
|
|
19.05.2015, 21:38
|
Аспирант
|
|
Регистрация: 16.03.2015
Сообщений: 43
|
|
Определить что это аякс запрос еще можно по хедерах(например JQuery отправляет хедер 'X-Request-With', а в чистом js хедер можно поставить любой)))
Цитата:
|
в IE8 не поддерживается History API
|
а полифил от полифил от Devote зачем? =) https://github.com/devote/HTML5-History-API
|
|
|
|