Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Обновление содержания без перехода по УРЛ


Автор: sokpet 17.5.2010, 16:57
Добрый день.

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

Необходимо обновлять содержание определенной части страницы используя меню и без перехода по новому УРЛ. Причем "высота содержания" должна зависить от того, что там находится (т.е не фиксированная). Для наглядности прицепил 2 картинки.

http://ipicture.ru/upload/100517/wCUk8vSI1d.jpg
http://ipicture.ru/upload/100517/7YY4JV2deZ.jpg

Еще очень важно, чтобы вся эта конструкция была очень дружелюбна с точки зрения SEO.

Наверняка этот вопрос уже сто раз обсуждали на форуме, но что-то ничего похожего не нашел. Может уже и готовое решение давно есть?

Порылся в гугле, и там пишут что нужно использовать jQuery AJAX или JavaScript.

Заранее спасибо


(Не уверен, что пишу в правильной ветке, но более подходящей не нашел.)

Автор: EmilRegis 17.5.2010, 17:27
ну тут или AJAX или фреймы

Автор: bars80080 17.5.2010, 17:52
любой переход без изменения урл - суть javascript, либо фрейм. и то и другое очень не дружелюбны к SEO

Автор: sokpet 17.5.2010, 18:28
Порылся поглубже в гугле... похоже на AJAXe делать нужно. 

У кого-нибудь есть примеры решения похожей задачи на AJAXe?

Заранее спасибо.

Добавлено через 3 минуты и 39 секунд
bars80080

Нашел интересный линк

http://ruseller.com/lessons.php?rub=28&id=569

Там пишут что "полученный сайт будет также абсолютно дружелюбен в плане поисковой оптимизации"

Значит это не правда?

Автор: bars80080 17.5.2010, 19:16
почему же? просто ты не совсем понял, что говорил автор. не знаю правда, как там с кодом далее, не читал, но вот это описывает вполне грамотную концепцию:

Цитата

Сайт, который мы создаем в этом уроке будет иметь обычную навигацию, состоящую из обычных ссылок, которые ведут на разные страницы. Если JavaScript включен тогда поведения после нажатия на ссылки будет изменено (т.е не будет перехода на новую страницу) на новое - загрузка контента используя AJAX и обновление страницы без перехода по новому УРЛ.


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

то есть для поисковиков сохраняется прежняя структура с обычными ссылками. а для пользовательских браузеров происходит адаптация

Автор: sokpet 17.5.2010, 22:24
bars80080

т.е. если я правильно понимаю, нужно написать весь сайт только на HTML и потом привентить этот код?

вообщем-то я бы его и написал только на HTML без всяких примочек, но проблема в том что при переходе по ссылке страница должна вставать на том же месте, т.е. ближе к концу страницы (страница достаточно длинная), там где будет "меняться" содержание.  Если такое возможно, то как?

Автор: bars80080 17.5.2010, 23:46
Цитата(sokpet @  17.5.2010,  22:24 Найти цитируемый пост)
т.е. если я правильно понимаю, нужно написать весь сайт только на HTML и потом привентить этот код?

в принципе да. немного конечно надо подмодифицировать разметку, чтобы замена происходила гладко и вставала где надо

Цитата(sokpet @  17.5.2010,  22:24 Найти цитируемый пост)
Если такое возможно, то как?

да там же по твоей ссылке всё расписано.

Цитата

Также важный шаг - это создание div, в котором будет находится контент. Именно в нем будет меняться текстовая информация при нажатии на ссылки в навигации. Обратите внимание, что у нас два элемента - обертка и непосредственно сам элемент в котором контент (с id - text).

смотри:
Цитата

Также обратите внимание, что все страницы с контентом являются сами по себе полноценными html документами. Мы загружаем их с помощью AJAX и используем только часть с текстом. Если кто-то обратится к такой странице напрямую, он увидит полный вариант страницы, а не только текст.

т.е. страница на которую мы ранее переходили по ссылке имеет обычную стрктуру:
<html>...<body>... <div id="ajax-wrap"><div id="text">content</div></div>...
все страницы имеют такую структуру, меняется только контент. далее добавляются скрипты, библиотека jquery и он по сути должен работать.
меняться будет только часть внутри <div id="text">

Автор: BlackApricot 18.5.2010, 05:29
bars80080, может чего и не допонял, но почему не использовать innerHTML или display.block/none? Всё будет готовое, ходить ни куда не надо. Кто мешает при наличии JS переключить всё "на себя".

Автор: EmilRegis 18.5.2010, 05:38
у вас вроде задача - менять содержимое дива без перезагрузки страницы, при чём тут display innerHTML или display.block/none?
с помощью аджакса обращаетесь к серверу, получаете необходимый контент и заполняете див <div id="ajax-wrap"><div id="text">content</div></div>

Автор: sokpet 19.5.2010, 09:25
а может лучше все сделать через function MM_showHideLayers(), конечно при условии что высота diva будет одинаковая?

Автор: ksnk 19.5.2010, 09:38
Цитата(sokpet @  19.5.2010,  09:25 Найти цитируемый пост)
а может лучше все сделать через function MM_showHideLayers(), конечно при условии что высота diva будет одинаковая? 

Дримвейвер - костыли... причем уже основательно замшелые... ходить стоит учится собственными ногами  smile 

А по сути, предлагается ВЕСЬ контент со всеми имеющимися фотографиями, маленькими и большими СРАЗУ загрузить в броузер и только потом показывать-скрывать нужные разделы? 

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

Автор: sokpet 19.5.2010, 10:56
Согласен. Dreamwever не самый хороший. Но как визуальный редактор вполне сносно работает. Все равно код ручками пишется, за исключением некоторых копи пастов.

Цитата

А по сути, предлагается ВЕСЬ контент со всеми имеющимися фотографиями, маленькими и большими СРАЗУ загрузить в броузер и только потом показывать-скрывать нужные разделы?


В принципе смысл именно в этом. 


Там максимум будет 50 фото (включая большие) + конечно краткое описание в отдельном dive

Цитата

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


Вот это меня как раз меньше всего беспокоит, так как сайт готовится для определенной страны в западной Европе, а здесь все на ADSL с минималкой в 6 Mb и до 20Mb, ну и конечно же весь трафик безлимитный.

Осталось опредилится замарачиваться с AJAX или делать через hidden/vissible.

Автор: ksnk 19.5.2010, 11:41
sokpet, надо еще не забывать стремительно растущий кластер юзеров с мобильными устройствами.  smile Вот они-то в первую очередь и завопят о трафике и тормозах загрузки. И не важно, что они в европах разных...

Автор: sokpet 19.5.2010, 12:51
т.е. чтобы всем угодить.... однозначно AJAX в данном случае?

Автор: bars80080 19.5.2010, 13:42
однозначно вариант где вначале ссылки самые обычные, и только потом переписываются

Автор: sokpet 20.5.2010, 16:25
Спасибо bars80080, так и сделаю.

Еще один вопросик. Как лучше сделать выплывающее окно ключевых слов (линков) как на картиках в прил. Тоже на JQuery?

Т.е два состояние: 1. По умолчанию панель всегда закрыта 
 2. Панель выплывает после нажатия на стрелочку (кнопку)

 Если есть ссылка на похожий скрипт, 
заранее спасибо.  


http://ipicture.ru/upload/100520/Lt7flT7omv.jpg

http://ipicture.ru/upload/100520/Q5FL4cGXNA.jpg

Автор: sokpet 20.5.2010, 17:17
с последним вопросом разобрался через JQuiery, всем спасибо

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)