Как не перезагружать часть страницы?
Всем доброго времени суток!
Охота сделать следующую фишку.
Хм, пожалуй, по технологии примерно как на Вконтакте.
ПРедставьте, заходите на сайт, на нем вы видите шапку, тело страницы и футер.
Так вот представьте, кликаем на ссылку, например, "Открыть блог васи пупкина", в этот момент происходит AJAX запрос на сервер, приходит ответ, очищаем body и вставляем в него ответ от аякса, в котором пришла запрашиваемая страница.
НО:
Тут есть траблы, которые я и пытаюсь обойти.
1.Если просто сделать запрос на index.php придет вся страница целиком. Можно попробовать пообрезать лишнее, но я не уверен, что прокатит. Плюс к тому, каждый другой компонент подгружает свои библиотеки и css файлы в header, то есть надо будет таким макаром извернуться, чтобы добавить в старый head новый head и вставить тело. ИМХО, все возможно с помощью регулярных выражений, но не слишком ли длинный путь?
2.Есть еще идея, делать AJAX запрос не на index.php а конкретно в необходимый компонент, задавая определенные параметры, как то шаблон и пр. но есть нюанс и тут, а придет ли вообще мне в ответе header?
Вобщем, ребята, суть проблемы повторю: Нужно перевести сайт на AJAX, чтобы сделать часть страницы, которая не перезагружается при переходе между страницами.
Адрес:
www.arts39.ru/
Trend Micro подтверждает, что данный веб-сайт может передавать вредоносное программное обеспечение или быть вовлеченным в сетевое мошенничество или подлог.
Что ж, есть идеи по проблеме, поставленной выше?
У меня конечно появилась одна идея, как это реализовать, но я пока что не уверен в её эффективности. А как это сделано у тебя?
Извините, но к этому все давно стремятся и по-тихоньку этого добиваются :)
Перевести весь функционал столь функциональной системы (даже "с под коробки") займёт немало времени.
Это несложно, но вот многое надо предусмотреть и сделать. В сети достаточно много уроков по аяксу, изучайте.
Не думаю, что гугл отстанет надолго.
Во вторых, достаточно сделать генератор карты сайта, перед этим обеспечив наличие не только аяковских, но и прямых ссылок.
В третьих я разрабатываю сайт, в котором жизненно необходимо оставить часть сайта неперезагружаемой при путешествии по сайту.
Есть и простые решения, однако это не сделает продукт столь качественным, насколько я планирую.
Яндекс уже давно писал, что работает в сторону индексирования содержимого, которое грузится js. Возможно уже реализовали.однако уже есть информация о том, что если заменить хэштэг # на !#, яндекс проиндексирует все эти страницы.
Применительно к вашему случаю. Я бы попробовал сделать так. При клике по меню, идет аякс обращение к какому-то вашему файлу, передаете какой компонент применять. Файл вызывает компонент, записывает в буфер и отдает данные работы этого компонента, плюс параметры страницы(кейворды, описание, тайтлы....). После или до подгрузки данных в body джаваскриптом меняете параметры страницы. Это так, в общем. Нюансы придется делать по месту.
Парсил приходящие данные, вырезал кусорк head'а динамический, вырезал body, вставлял их в страницу.
НО:
css стили к новым объектам не применяются, все js события( да хотя бы тот же click, которым и перехватываю ссылки) также не воспринимают новые объекты.
Как можно обойти эту заразу? тогда проблему как рукой снимет.
Точно… Посмотрел, всё слетает почему то.css стили к новым объектам не применяются, все js события( да хотя бы тот же click, которым и перехватываю ссылки) также не воспринимают новые объекты.
Посижу на досуге. Если получится что сделать, отпишусь.
Можно и это организоват как я поимаю, однако придется тогда ответ детально парсить на элементы
Скорее вы правы. Тут связано с формированием DOM.Слетает, как я понял, потому что данные добавляются как гипертекст, однако не добавляются в DOM.
Я пробовал другим путем. Раз замена <head></head> дает сбой, попробовал менять просто мета-теги. Результат есть. Сделал так. В файле mod_menu.tpl в строках 24 и 30 в ссылках заменил
href="{$item.link}"
href="#" onclick="loadBody('{$item.link}'); return false;"
{literal} <script> function loadBody(target_uri){ $.post(target_uri,function (data){ var keywords = $(data).find("meta[name=keywords]").attr('content'); var mainbody = $(data).find('#mainbody'); $('#mainbody').html(mainbody); $("meta[name=keywords]").attr('content', keywords); },"html"); } </script> {/literal}
Кстати можно подружить аякс с поисковиками. !# почему то у меня не сработал. Для этого, делаем так
<a href="{$item.link}" rel="ajax"...
$('a[rel=ajax]').click(function(){ //какие-то действия return false; // не забываем про это, чтобы не произошел переход. });
По нерешенным проблемам возможно поможет Mike
Он отлично разбирается в js. Попробуйте написать в личку. Может подскажет как.