Какой способ организации сайта без перезагрузки лучше?

Question

[TheTheThe]

Какой способ организации сайта без перезагрузки лучше?

1) Создать много div и сделать их скрытыми. Делать видимым только тот div, раздел которого открыл пользователь.
2) Создать JSON файл, получать данные посредством ajax и .html().
3) Получать из php файла? Опять же ajax запрос, и в php файле echo.
Есть еще способы?

Answer 1

[index0h]

Что лучше, ложка, вилка, или нож?)) Каждый способ оптимален под свои задачи.

Answer 2

[Сергей Протько]

Да прочитайте вы уже про Single page applications, концепцию "клиент-сервер", REST и т.д. Так же перестаньте думать "страницами". Думайте состояниями. По сути body в html это ваш MainWindow, а там уже творите что хотите. Хотите текст в диве поменять - меняйте. Хотите пол страницы переделать - меняйте.

Рекомендую вам начать с Backbone + Handlebars и плавно перейти на Angular/Ember. А может и вовсе с них начать и переходить на что-то более низкоуровневое (для развития понимания) только при недопонимании концепций этих фреймворков. Если вы знакомы с архитектурой серверных приложений - у вас то же самое будет (приблизительно) на клиенте. Только вместо базы данных будет rest api, раутинг так же, контроллеры так же будут обрабатывать конкретные состояния, добавится нормальный слой представления и возможно viewmodel. MVC изначально для интерактивных приложений создавался а не для request/response.

Answer 3

[IceJOKER]

Один из вариантов - фреймворки(angular к примеру).
Как я сделал для одного сайта - сначала писался просто сайт, обычный php сайт, потом захотелось осуществлять переходы без перезагрузки и сделал так:
Если в браузере есть поддержка history api, то загружаем динамически, то есть просто ajax запрос на ту страницу, на которую ведет ссылка(с preventDefault(), чтоб переход не осуществлялся , а происходило все без перезагрузки), забираем оттуда данные и меняем нужный блок на нужные данные(в моем случае - основной блок и заголовок) и все, сайт работает как с JS, так и без, как в старых , так и в новых браузерах.
а если history api нет, то обычная загрузка(лень было возиться с location.hash)

И напоследок - html5doctor.com/history-api - там же и есть примеры работы

Comments

[TheTheThe]

А что в себе должен содержать ссылаемый файл? Какого формата? То есть когда мы получаем ajax, что он вернет? И как должен выглядеть тот же php файл, чтобы грамотно вернуть контент?

[IceJOKER]

TheTheThe: в моем случая как я и писал - сначала был простой сайт на php + html, а потом только подключил динамичность, то есть js вешает обработчик клика ссылки(в моем случае чуток по-другому, но принцип тот же), в обработчике извлекаю из ссылки атрибут href, и с помощью ajax подгружаю данные по этой ссылке(всю страницу), далее меняю заголовок+контент.

[TheTheThe]

IceJOKER: Я имею ввиду что содержит Ваш файл, который указан в ссылке. Обычный php файл, или там echo "TEXT"; Или что ?)

[IceJOKER]

TheTheThe: я же написал - ОБЫЧНАЯ СТРАНИЦА - html страница, которую генерирует php, не знаю как еще по другому объяснить

[TheTheThe]

IceJOKER: Вам ведь ajax вернет текст документа html?

[IceJOKER]

TheTheThe: "ОБЫЧНАЯ СТРАНИЦА - html страница" - как вы сами думаете???

Answer 4

[xmoonlight]

Одностраничное приложение