Как современные веб-приложения / сайты делают постбэки? javascript / ajax, <form>или X?

Question

Мне любопытно узнать, как "современные" веб-приложения / сайты выполняют обратную передачу, то есть, когда они отправляют входные данные пользователя на сайт, они обрабатываются.

Современные сайты по-прежнему используют старую моду <form>-теги или они используют какую-то реализацию javascript / ajax?или есть еще третий вариант?

Answer 1

Я обычно использую и , где полное обновление страницы после обычной <form> отправки работает, но если JavaScript включен, вы подключаетесь к событию отправки и переопределяете его.Это дает вам причудливый AJAX, если это возможно, и постепенную деградацию, если это не так.

Вот краткий пример (jQuery для краткости):

<form type="POST" action="myPage.htm">
  <input type="text" name="UserName" />
  <button type="submit">Submit me!</button>
</form>

Если у пользователя нет JavaScript, нет проблем сФорма работает.Если они делают (и большинство из них), я могу сделать это:

$(function() {
  $("form").submit(function() {
    $.ajax({ 
      url: this.action,
      type: this.type,
      data: $(this).serialize(),
      success: function(data) {
        //do something with the result
      }
    });
  });
});

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

Если выЛюбопытно, что на сервере вы можете проверить заголовок X-Requested-With в большинстве библиотек и, если он присутствует, вернуть только <form> или какое-либо сообщение об успешном выполнении (поскольку это был запрос AJAX), если его нет, тогда предположитеполная загрузка страницы и отправка целиком.

Answer 2

Это будет зависеть от того, что именно делается, но большинство веб-приложений будут использовать комбинацию AJAX для короткого контента (особенно если интерактивные / интерактивные обновления полезны без обновления страницы) и «старомодных» форм.для более длинного контента, где полная загрузка страницы не является проблемой.

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

Также обратите внимание, что с точки зрения кода, управляющего серверным приложением, не обязательно существует большая разницамежду запросом, поступающим из стандартной формы, или запросом, поступившим из представления AJAX.Вы можете легко структурировать один сценарий для правильного ответа на оба типа запросов (хотя в некоторых случаях вы можете сэкономить пропускную способность, отправив более короткий ответ «только для данных» в версию AJAX, поскольку клиентский код может отвечать за синтаксический анализданные в содержательный контент).

Answer 3

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

Улучшение может быть сделано с помощью угона . Это означает, что эта же страница может выполнять с помощью некоторого ajax форму отправки сообщения на сервер, но не всю страницу. Это позволяет пользователям с включенным JavaScript иметь лучший пользовательский опыт.

старые моды-теги или они используют какую-то реализацию javascript / ajax?

Для того, чтобы JavaScript работал на чем-то, вам все еще нужны эти старомодные теги. Веб-приложения могут быть структурированы до 3 основных частей:

• Содержание: HTML
• Макет: CSS
• Поведение: javascript / ajax

Answer 4

В основном, есть три модели.

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

Серверно-ориентированная модель ajax использует вызовы ajax для частичного обновления страницы; страница построена так же, как в традиционной модели, но вместо запуска полной обратной страницы клиентский сценарий использует вызовы ajax для отправки кликов и других событий и извлекает информацию для замены части документа (обычно в JSON или Форма XHTML). Поскольку вы не публикуете всю страницу каждый раз, ответ обычно быстрее. Эта модель полезна, если вы хотите использовать ajax везде, где это возможно, но при этом хотите использовать традиционные постбэки, если javascript недоступен.

Ajax, ориентированный на клиента, выбирает другой путь; Основная идея заключается в том, что вы пишете все свое приложение в javascript, используя ajax для обмена данными, а не разметки. Когда вы нажимаете кнопку, приложение отправляет запрос на сервер и получает данные. Затем данные используются для дальнейшей обработки на клиенте. Это более гибко и обычно быстрее, чем другие методы, но требует хорошего знания javascript. Приложения, написанные в этом стиле, вообще не работают вообще, когда на клиенте отключен JavaScript.