Интенсивное использование ajax-вопроса - как визуализировать html на странице изначально и после ее изменения? - PullRequest
Новая
       16

Интенсивное использование ajax-вопроса - как визуализировать html на странице изначально и после ее изменения?

2 голосов
/ 27 апреля 2011

Я уверен, что это распространенная проблема для многих веб-приложений в наши дни. Каков наилучший способ повторного использования HTML-шаблонов, чтобы вы не удваивались при первоначальном отображении страницы и добавлении на нее новых элементов?

  1. Я мог бы отобразить HTML-страницу как обычно, но не заполнять какие-либо данные конкретно. Затем каждый раздел страницы будет нести ответственность за визуализацию с использованием Javascript. Хорошая вещь об этом методе - то, что javascript используется, чтобы представить весь контент, который является обновляемым. Здесь также есть очень хорошее разделение интересов, где каждый раздел на странице делает свое дело.

    Недостатком является то, что я делаю несколько запросов к серверу на страницу при загрузке.

  2. Я мог бы отправлять фрагменты HTML, сгенерированные сервером, и просто добавлять / добавлять их к любой части страницы. Это делает начальную загрузку страницы очень быстрой. Он также использует тот же код шаблона на стороне сервера, поэтому дублирование также отсутствует.

    Недостаток в том, что я не могу его осмотреть дальше. Другой недостаток в том, что prepend / append довольно ограничен. Что если я хочу сохранить порядок сортировки? Если он в алфавитном порядке, пользователю все равно придется обновить экран, чтобы получить правильный порядок сортировки. Если результаты разбиты на страницы, это еще более проблематично.

  3. Я мог бы отправить структуру данных JSON, как и в 1 - однако я мог бы также добавить полностью сгенерированный HTML-шаблон. Это дало бы мне возможность сначала осмотреть объект, прежде чем решить, как добавить / добавить его на страницу.

    Единственный реальный недостаток - это то, что мне пришлось бы вызывать Freemarker вручную в моих контроллерах (я использую Spring 3.0.x MVC). Обычно это делается для меня автоматически. Я уверен, что есть способ сделать это, но мне придется потратить некоторое время на изучение того, как.

    По сути, это дает мне все преимущества 1 и 2, но это также самое сложное решение. Переданные данные также выше, чем у двух других решений ... но, возможно, с этим ничего не поделаешь.

Какой способ считается лучшим? Любые другие подходы? Приложение, которое я создаю, действительно сложное, и в нем будет много Ajax. Эквивалентная версия только для HTML просто невозможна. На самом деле, я даже не собираюсь создавать приложение, чтобы пользователи, не являющиеся пользователями Javascript, могли его использовать. Ну что ж. Так что имейте это в виду, когда отвечаете;)

Спасибо

Ответы [ 3 ]

1 голос
/ 27 апреля 2011

Я бы использовал moustache.js для заполнения частей шаблона значениями, полученными из JS.

Также, если вы не хотите использовать ajax при начальной загрузке, вы можете написатьjson начальной страницы в формате json в тегах сценария в исходном html.

Наконец, если вы делаете действительно сложное приложение ajax, я бы порекомендовал использовать backbone.js ,Сначала это трудно понять, но это действительно мощно!Вот полный пример с комментируемым кодом .

1 голос
/ 27 апреля 2011

Разумный подход состоит в том, чтобы ваш шаблон состоял из нескольких компонентов.Когда страница отображается в первый раз, отображается весь шаблон и возвращается HTML для всей страницы.Последующие Ajax-запросы на обновление определенной части страницы просто вызывают рендеринг определенного компонента, и возвращается html только для этого компонента.

OUTLINE COMPONENT 

 HEADER COMPONENT

 COMPONENT X

 COMPONENT Y  

 ...

 FOOTER COMPONENT

По запросу страницы отображается компонент структуры и все его подкомпоненты.Затем допустим, что HTML-код для COMPONENT X необходимо обновить: поэтому запрос ajax выглядит примерно так: 

GET /MyPage.componentX

, который вернет HTML-код для этого компонента.

Однако я определенно советую использоватьдостойный фреймворк для веб-приложений.Большинство из них основаны на компонентах, с необходимыми запрограммированными javascript на стороне клиента.

0 голосов
/ 27 апреля 2011

1>

Слушайте, я видел много людей и веб-сайт, загружающий множество содержимого, которое в конечном итоге сбрасывается в innerHTML div.Я чувствую, это просто трата.Что я делаю, так это делаю самый маленький и быстрый запрос, насколько это возможно, и стремлюсь получить то же самое и для ответа.Вы говорите, что обновляете имена после выполнения нового поискового запроса, я бы предпочел извлечь данные из ответа, чем ответ в виде таблицы или div !Например: -

"Пользователь1; 501; BSoD | Пользователь2; 507; BSoD"

Поэтому вместо извлечения кода таблицы я буду использовать Javascript для отображения таблицы на клиенте.боковая сторона.Сначала я разделю ответ с "|"а затем каждый кусок ";"Это упрощает и ускоряет выполнение команд AJAX.

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

2>

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

Многие люди используют библиотеки размером от 100 до 450 кБчто просто не имеет смысла только для AJAX.Это просто замедляет работу вашего сайта и, в конечном итоге, и HTML-страницы.Вы должны использовать теги сценария с атрибутом src , чтобы добавить файл сценария с вашего веб-сайта, но убедитесь, что тег сценария начинается и заканчивается как <script src="Whatever source"></script> для повышения производительности веб-страницы!

3>

Проверьте собственные заголовки, отправленные таким образом, чтобы любые запросы не AJAX не приводили к отображению ответа!

...