Я сталкиваюсь с общей проблемой при попытке разработки AJAX. Где это возможно, я хотел бы попробовать обновить данные в существующем макете, а не в самом макете. Например, возьмите div ниже:
<div id="content-5">Here is some content</div>
Я бы получил обновленное значение для content-5 с сервера и просто заменил бы содержимое content-5 значением. Это имеет большой смысл для простых замен данных, когда значение всегда будет отображаться в чистом виде.
Иногда контент более сложный, и мне действительно нужно получить больше, чем просто необработанные данные ... может быть, есть некоторая логика для определения того, как отображается значение, и, возможно, стиль должен отличаться в зависимости от данных внутри. В этом случае я обычно создаю HTML-код на стороне сервера и внедряю его в элемент, а не просто в необработанные данные.
Пример. Поле состояния из контроллера возвращается как «завершено», но из документа конструктора «завершено» должно показывать пользователю текст «Доступен», и его нужно стилизовать не так, как другие. статусы.
Выполнение этого в Javascript потребовало бы некоторого углубленного знания представления, которое, вероятно, уже обрабатывает слой шаблона. Конечный результат будет таким же (фрагмент кода ниже), но разница в том, что может быть некоторое дублирование кода и гораздо более сложный слой Javascript.
<div id="content-5"><span class="success">Available</span></div>
В обязательном порядке возникает требование, что система должна будет обрабатывать и «новое» содержимое. Самое простое решение для реализации - просто получить все содержимое одновременно, чтобы мне не пришлось обрабатывать дополнительную сложность внедрения нового элемента вместо простой замены существующего содержимого.
Итак, я создаю новый шаблон, оборачиваю содержимое в другом элементе идентификатором и заменяю массово все div содержимого в любое время, когда происходит изменение.
<div id="allContent">
<div id="content-1">Some content A</div>
<div id="content-2">Some content B</div>
<div id="content-3">Some content C</div>
<div id="content-4">Some content D</div>
<div id="content-5">Some content E</div>
</div>
В какой-то момент я должен задаться вопросом: где линия? В какой-то момент я чувствую, что в конечном итоге я просто заменю всю страницу запросом AJAX. Неужели это действительно проблема?
Я понимаю, что это может быть довольно субъективно, но каковы хорошие стратегии для определения, на каком уровне вы должны заменять контент на AJAX? Замена только данных кажется моим предпочтительным методом, когда это возможно, поскольку это делает контроллеры AJAX очень простыми. Замена больших фрагментов HTML из шаблона кажется наиболее простой для решения более сложных проблем макета и дизайна, а также ощущается, что ее легче обслуживать. Есть ли другие варианты, которые я не рассматривал?
Я ожидаю, что будет некоторое обсуждение программного управления DOM, но мне лично это очень не нравится. Код в конечном итоге выглядит довольно ужасно и действительно начинает интегрировать слишком много разметки и дизайна в слой JS на мой взгляд. Поскольку я обычно работаю с библиотеками шаблонов какого-либо типа (будь то сырой PHP, шаблоны PHP, такие как Smarty или JSP в Java), кажется, имеет больше смысла оставлять там как можно больше визуального дизайна.
EDIT
Исходя из первых нескольких ответов, кажется, что это читается как попытка удержать пользователя на той же странице, но навигация по сайту или иное радикальное изменение страницы с каждым обновлением. Вопрос в том, как определить, где должна работать компоновка для вызовов AJAX, и является ли приемлемой практикой замена больших кусков кода с помощью запроса AJAX, зная, что код замены может выглядеть почти идентично тому, что было там. до этого.