formの必要性について

Question

お世話になっております。

現在Webページの入力項目を作成しているのですが、<form>の必要性がわからなくなり質問させて
頂きました。

<form>を使いデータをサーバーへ送信する方法とAjaxを使用してAPI経由でデータを送信する2択で どちらを使うべきなのか迷っています。 <form>を使用すると、PUT, DELETEの方法はありますが、GETとPOSTのみを標準でサポート。 しかしAjaxを使用すればGET, POST, PUT, DELETEを柔軟に行うことができる。 とのメリットがあります。 <form>を利用すればパラメータの作成が楽である、multipart/form-dataを簡単に送信できる事以外に大きなメリットを感じません。

皆さんはformとAjaxをどのように使い分けしてるのでしょうか？

Answer 1

確かにどちらも「クライアントの情報をサーバへ渡す手段」ですが、実装する側が使いやすいとかの基準で決めるのではなく、画面で求められる要件によって使い分けるべきものと思います

大きな違いは、form は submit によってページの更新をともないますが、Ajax は非同期通信によって同じページに滞在しながらサーバからのレスポンスを受信できます
（IFrameを使うとsubmit且つ画面遷移無しが実現できますが、それはそれとして）

画面でユーザはどうしたいか、システムとしてどうさせたいか、によってどちらを使うかが変わると思います

Comments

[chonbo2525]

早速の回答ありがとうございます。

画面で求められる要件によって使い分ける。。。おっしゃる通りです。
やはり画面遷移を伴うのかどうかが焦点なようですね。
大変参考になります。

Answer 2

Ajaxを使用すればGET, POST, PUT, DELETEを柔軟に行うことができる

認識がおかしいですよ。Ajaxであっても、サポートするのはGET, POST のみです。

皆さんはformとAjaxをどのように使い分けしてるのでしょうか？

基本は Form 画面遷移をさせたくない場合のみ ajax を利用しています。

Comments

[chonbo2525]

早速の回答ありがとうございます。
>Ajaxであっても、サポートするのはGET, POSTのみ
これは初耳でした。ありがとうございます。
私が使用しているライブラリはXMLHttpRequestを利用し、非同期通信を行っているようですが、XMLHttpRequestはopen()に指定するHTTPメソッドにGET, POSTの他にDELETE, PUT等に対応していると認識しておりました。

なるほど。画面遷移させたくないなどの状況により使い分けているわけですね。
大変参考になります。

[sho_cs]

XMLHttpRequestの仕様（https://xhr.spec.whatwg.org/）等を読んだのですが
>Ajaxであっても、サポートするのはGET, POSTのみ
に該当する記載が見つかりませんでした。
jQuery.ajaxについて「PUT, DELETEに対応していないブラウザが存在する」という記載はありました。

[退会済みユーザー]

すみません。自分間違っていたんですね…