Зачем нам <form/>, когда у нас есть AJAX?

Question

Я только начал изучать JavaScript, и в своих проектах я обнаружил, что везде, где используется форма AJAX.

Простой пример:

<form id="demo_form" action="demo" method="post"> 
    <input type="text" name="username"> 
    <input type="submit" value="Submit"> 
</form> 

И Аякс может быть использован, как это:

$('#demo_form input[type="submit"]').click(function(){  
    $.ajax({ 
     type: "POST", 
     url: "/demo", 
     dataType: "text", 
     data: { 
      username: $('#demo_form input[name="username"]').val() 
     } 
    }); 
}); 

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

Поскольку форма все еще используется и популярна в наши дни, я думаю, что есть некоторые преимущества, которые я не знаю.

Answer 1

Есть случай предоставления функций пользователям, когда JavaScript недоступен. Это, а также понимание того, что некоторые действия, которые мы проксируем по JavaScript вроде PUT и DELETE, не могут быть выполнены с использованием <form> без проксирования скрытого ввода, такого как <input type=hidden name=_method>.

Answer 2

Этот ответ может быть лучше объяснить кому-то с гораздо большим опытом, но я дам ему попробовать:

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

Answer 3

Прежде всего, <form> элемент предшествует вызовам Ajax годами. Ajax звонки (лучше, если вы их называете XMLHttpRequest) были добавлением в Internet Explorer, чтобы можно было загружать/отправлять данные из JavaScript.

Может быть, самое главное, если вы хотите прекратить поддержку либо <form> элементы илиXMLHttpRequest, вы перерыв в основном все существующие сайты.

Кроме того, требование о том, что нужно выдавать XMLHttpRequest звонков (с JavaScript не всегда быть доступно) использовать JavaScript, есть также функциональные и семантические различия:

• HTML форма семантический группа входных элементов (в противном случае, как бы вы знаете, какие элементы ввода принадлежат друг другу?)
• Они поддерживают некоторые возможности как загрузки файлов, которые до недавнего времени не были поддержаны в JavaScript на всех (вы не можете прочитать содержимое файла в файл загрузки полей)
• Формы знают, как сериализация поля ввода (JavaScript библиотеки JQuery реализует эту логику, которая поставляется бесплатно с браузером)
• Формы не затронутый CORS restrictions (т.е. они может отправлять сообщения любого сервер; в то время как для XMLHttpRequest для этого требуется специальная конфигурация на стороне сервера)
• Формы имеют . Доступны встроенные пользовательские интерфейсы как отправка при нажатии клавиши ввода/возврата.
• Формы могут разместить данные в разных наборах символов и кодировки (с помощью атрибута accept-charset), что чрезвычайно трудно сделать в JavaScript (в JavaScript все строки Unicode)

XMLHttpRequest, конечно, может сделать вещи, которые не могут, например, устанавливать HTTP-заголовки, могут использовать больше HTTP-глаголов (не только post и get), как вы упомянули, может быть асинхронным, и у них также есть чрезвычайно расширенный диапазон событий, на которые вы можете реагировать.

Обе технологии имеют свое место, в зависимости от того, чего вы хотели бы достичь.

Answer 4

Существует одно важное преимущество, о котором никто не упоминал до сих пор - динамическая совокупность данных. Имея только одно поле в форме, вы, вероятно, не почувствовали бы этого.

Но рассмотрим форму, которая имеет несколько полей:

<input type="text" name="qty" /> 
<input type="text" name="price" /> 
<input type="text" name="title" /> 
... and so on ... 

И вы населяют данные таким образом:

data : { 
    price : $("[name='price']").val(), 
    qty : $("[name='qty']").val(), 
    title : $("[name='title']").val(), 
} 

А что, если решили добавить больше полей позже? Вы должны добавить новые имена полей с их значениями до data. И по мере того, как ваш код будет расти, он будет довольно запутанным.

Вместо этого вам лучше придерживаться формы сериализации. Выше, можно просто переписать в виде:

data : $("form").serialize() 

И даже если добавить несколько полей позже, вы не должны заполнять data больше. Простыми словами, $("form").serialize() делает население data динамически.