Перевести InstantCMS на AJAX

Как не перезагружать часть страницы?

#1 28 июля 2012 в 21:20
Друзья!
Всем доброго времени суток!
Охота сделать следующую фишку.
Хм, пожалуй, по технологии примерно как на Вконтакте.
ПРедставьте, заходите на сайт, на нем вы видите шапку, тело страницы и футер.
Так вот представьте, кликаем на ссылку, например, "Открыть блог васи пупкина", в этот момент происходит AJAX запрос на сервер, приходит ответ, очищаем body и вставляем в него ответ от аякса, в котором пришла запрашиваемая страница.
НО:
Тут есть траблы, которые я и пытаюсь обойти.
1.Если просто сделать запрос на index.php придет вся страница целиком. Можно попробовать пообрезать лишнее, но я не уверен, что прокатит. Плюс к тому, каждый другой компонент подгружает свои библиотеки и css файлы в header, то есть надо будет таким макаром извернуться, чтобы добавить в старый head новый head и вставить тело. ИМХО, все возможно с помощью регулярных выражений, но не слишком ли длинный путь?
2.Есть еще идея, делать AJAX запрос не на index.php а конкретно в необходимый компонент, задавая определенные параметры, как то шаблон и пр. но есть нюанс и тут, а придет ли вообще мне в ответе header?
Вобщем, ребята, суть проблемы повторю: Нужно перевести сайт на AJAX, чтобы сделать часть страницы, которая не перезагружается при переходе между страницами.
#2 28 июля 2012 в 21:23
Так вот представьте, кликаем на ссылку, например, Взгляните ко мне на www.arts39.ru удали троян vlaugh
#3 28 июля 2012 в 21:27
nikolas, Это не троян сэр, сайт закрыт. =)
#4 28 июля 2012 в 21:39
антивирус показал smoke
Адрес:
www.arts39.ru/

Trend Micro подтверждает, что данный веб-сайт может передавать вредоносное программное обеспечение или быть вовлеченным в сетевое мошенничество или подлог.
#5 28 июля 2012 в 21:48
nikolas, Домен принадлежит не мне. smoke
Что ж, есть идеи по проблеме, поставленной выше?
#6 28 июля 2012 в 22:44
Ето ты типа о том, что у меня в футере??? glasses

то есть об етом??
#7 28 июля 2012 в 23:02
Дааа, что то типа того, Олег с клещами!
У меня конечно появилась одна идея, как это реализовать, но я пока что не уверен в её эффективности. А как это сделано у тебя?
#8 29 июля 2012 в 03:28
Извините, я пока вижу только минусы такой идеи — Вам для чего нужно, если не секрет? Есть смысл терять хиты страницы и понижать ПФ в ноль? Пс за это наказывают сейчас…
#9 29 июля 2012 в 11:59
Инновационная идея :D
Извините, но к этому все давно стремятся и по-тихоньку этого добиваются :)
Перевести весь функционал столь функциональной системы (даже "с под коробки") займёт немало времени.
Это несложно, но вот многое надо предусмотреть и сделать. В сети достаточно много уроков по аяксу, изучайте.
#10 29 июля 2012 в 18:15
Возможно мои слова не покажутся авторитетными, однако уже есть информация о том, что если заменить хэштэг # на !#, яндекс проиндексирует все эти страницы.
Не думаю, что гугл отстанет надолго.
Во вторых, достаточно сделать генератор карты сайта, перед этим обеспечив наличие не только аяковских, но и прямых ссылок.
В третьих я разрабатываю сайт, в котором жизненно необходимо оставить часть сайта неперезагружаемой при путешествии по сайту.
Есть и простые решения, однако это не сделает продукт столь качественным, насколько я планирую.
#11 29 июля 2012 в 19:40

однако уже есть информация о том, что если заменить хэштэг # на !#, яндекс проиндексирует все эти страницы.

VladimirTot
Яндекс уже давно писал, что работает в сторону индексирования содержимого, которое грузится js. Возможно уже реализовали.
Применительно к вашему случаю. Я бы попробовал сделать так. При клике по меню, идет аякс обращение к какому-то вашему файлу, передаете какой компонент применять. Файл вызывает компонент, записывает в буфер и отдает данные работы этого компонента, плюс параметры страницы(кейворды, описание, тайтлы....). После или до подгрузки данных в body джаваскриптом меняете параметры страницы. Это так, в общем. Нюансы придется делать по месту.
#12 29 июля 2012 в 20:01
Марат, Так и делал почти, напрямую делал запрос по всем ссылкам(перехватывал их с помощью js).
Парсил приходящие данные, вырезал кусорк head'а динамический, вырезал body, вставлял их в страницу.
НО:
css стили к новым объектам не применяются, все js события( да хотя бы тот же click, которым и перехватываю ссылки) также не воспринимают новые объекты.
Как можно обойти эту заразу? тогда проблему как рукой снимет.
#13 30 июля 2012 в 07:11

css стили к новым объектам не применяются, все js события( да хотя бы тот же click, которым и перехватываю ссылки) также не воспринимают новые объекты.

VladimirTot
Точно… Посмотрел, всё слетает почему то.
Посижу на досуге. Если получится что сделать, отпишусь.
#14 30 июля 2012 в 20:08
Слетает, как я понял, потому что данные добавляются как гипертекст, однако не добавляются в DOM.
Можно и это организоват как я поимаю, однако придется тогда ответ детально парсить на элементы
#15 30 июля 2012 в 20:50

Слетает, как я понял, потому что данные добавляются как гипертекст, однако не добавляются в DOM.

VladimirTot
Скорее вы правы. Тут связано с формированием DOM.
Я пробовал другим путем. Раз замена <head></head> дает сбой, попробовал менять просто мета-теги. Результат есть. Сделал так. В файле mod_menu.tpl в строках 24 и 30 в ссылках заменил
  1. href="{$item.link}"
заменил на
  1. href="#" onclick="loadBody('{$item.link}'); return false;"
И в конец этого файла вставил
  1.  
  2. {literal}
  3. <script>
  4. function loadBody(target_uri){
  5. $.post(target_uri,function (data){
  6. var keywords = $(data).find("meta[name=keywords]").attr('content');
  7. var mainbody = $(data).find('#mainbody');
  8. $('#mainbody').html(mainbody);
  9. $("meta[name=keywords]").attr('content', keywords);
  10. },"html");
  11. }
  12. </script>
  13. {/literal}
  14.  
В принципе всё работает. Кейворды проверял вставляя за место переменной keywords строку, меняется. Другая проблема. При пост обращении к ури почему-то не формируются кейворды и тайтл. Вернее формируются, но как для главной страницы. А изменения в результате работы компонента не заносятся. Поэтому всё же предпочтительнее делать как говорил раньше. То есть обращаемся не к прямо ури, а к какому-то нашему файлу php. Где всё подключаем, вызываем ури, генерируем страницу, собираем в буфер и отдаем клиенту. При помощи js меняем мета-теги. Сложнее с тегом <title></title>. Его содержимое тоже можно менять, но только для браузера. Меняется во вкладке браузера, на странице(в исходном коде) остается прежний.
Кстати можно подружить аякс с поисковиками. !# почему то у меня не сработал. Для этого, делаем так
  1. <a href="{$item.link}" rel="ajax"...
и сама функция js
  1.  
  2. $('a[rel=ajax]').click(function(){
  3. //какие-то действия
  4. return false; // не забываем про это, чтобы не произошел переход.
  5. });
  6.  
Как то так.
По нерешенным проблемам возможно поможет Mike
Он отлично разбирается в js. Попробуйте написать в личку. Может подскажет как.
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.