AjaxでGET使うのかPOSTを使うのか分からない。

Question

Ajaxの通信タイプGET or POST ?

$.ajax({
    url: 'data/content.json',
    type: 'GET',
    dataType: 'json',
    timeout: 10000,
}).then(
   (data, textStatus, jqXHR) => {
    // 何らかの処理
   },
   (jqXHR, textStatus, errorThrown) => {
    // エラー処理
   }
);


const xhr = new XMLHttpRequest();
const url = 'data/content.json';

xhr.onreadystatechange = function () {
　　　　if (xhr.readyState === 4) {
           if (xhr.status === 200 || xhr.status === 304) {
               const data = JSON.parse(xhr.responseText);
               // 処理
           }
       }
}
xhr.open('GET', url, true);
xhr.send(null);

こんな感じで JavaScrupt や jQuery でAjax通信を行うのは分かるのですが、
GET と POST のどちらを使えば良いのか分かりません。

GET ･･･ 少量通信
POST ･･･ 大量通信

ってな感じだと自分では解釈しています。
しかし、何バイトから何バイトまでがGETで、
POSTは何バイト以上とか、何バイトまでとかってあったら教えて欲しいです。

よろしくお願いいたします。

Answer 1

GET ･･･ 少量通信

POST ･･･ 大量通信
ってな感じだと自分では解釈しています。

微妙です。
そういった側面もあるといえばありますが、Method の役割は以下の RFC を参照すると良いです。

rfc7231

   +---------+-------------------------------------------------+-------+
   | Method  | Description                                     | Sec.  |
   +---------+-------------------------------------------------+-------+
   | GET     | Transfer a current representation of the target | 4.3.1 |
   |         | resource.                                       |       |
   | POST    | Perform resource-specific processing on the     | 4.3.3 |
   |         | request payload.                                |       |

各セクションを参照してください。

Comments

[norino]

te2jiさん、回答ありがとうございます。
RFC読みました、というか英語ばかりで難しかったです。
google翻訳使って読みましたが、話の半分も入ってきませんでした。
自分の知識不足が恥ずかしいです。

しかし、微妙ですとお答えしてくださったように、
GETとPOSTの考え方が、自分の理解しているものと違うのだということは
なんとなく分かりました。

とても貴重な資料含めて、
ありがとうございました。

[退会済みユーザー]

tacsheaven さんの POST の説明はちょっと怪しいです。
4.3.3 だけでも、再読すると良いですよ。

Answer 2

処理的にはpostのformdata処理が一番ラクです
ただし生のjsonひっぱるだけならパラメータ関係なさそうなので
どちらでもよいです

Comments

[yambejp]

きょうびXMLHttpRequestは流行ってないでしょう・・・
const url='data/content.json',
const data=fetch(url).then(res=>res.json());

[norino]

どちらも使ったことのないメソッドなので予備知識がない状態で話させて頂きます。
formdataはさっと読んだのですが、まだまだ理解できていませんのですいません。
fetchは、これが終わったら入ろうとしてたところなので頑張ります。

まず、fetchもformdataも非同期通信ができるのでしょうか？
ここでyambejpさんがお答えしてくれている時点でそうなのだと思うのですが、あってますか？

それから、fetchとformdataを使うメリット教えて頂くとありがたいです。
formdataを使うと処理が１番楽とおっしゃってますが、どういうところが楽なのか教えてください。
fetchよりもformdataの方が優れているのでしょうか？

質問ばかりですいません。
どうかよろしくお願いいたします。

[yambejp]

FormDataの利点は所定のformの値をまるっと掴むことができることです。
またformがなくても値をappendすることができます

//send.html
const body=Object.entries({a:1,b:2}).reduce((x,y)=>(x.append(y[0],y[1]),x),new FormData());
const method="post";
const url="recv.php";
fetch(url,{body,method}).then(res=>res.text()).then(console.log);

//recv.php
<?PHP
print_r($_POST);

のように簡単に表記できます

[norino]

yambejpさん、サンプルまで書いてくださってありがとうございます。
phpは未修得なのでちょっと分かりませんが、fetchとformdata覚えて理解したいと思います。
どうもありがとうございました。

Answer 3

そもそも GET と POST は役割が違います。
GET：指定した URL のリソースを取り出す
POST：指定した URL にデータを送出する

GETでパラメータを指定することで、同じ URL（のページ）であっても別の結果が得られる、のですが、このことから GET では

• パラメータはあまり長くできない（URL としての長さ制限が Web サーバ側にある）
• パラメータは URL エンコードしていなくてはならない（そのまま多言語文字を送ることはできない）

という制約が出てきます。

一方 POST はそのような制限はない（POST の場合 HTTP のボディ部としてデータが送られる）ので、大容量だったり複雑なデータを送るのには向いています。
ですが本来は POST は「サーバ上のリソース（データ）に、何かしらの影響を与える（追加だったり更新だったり）」ものとして考えられたものです。その意味では単純な検索で POST を使うのは（本来の意味からは）少し外れたものと考えることもできます。

まあ、今ではそんなこと考えずに POST に集約してしまうのも手だと思いますが。
※GET の場合 URL に書かれるので送信した情報がすぐ見て分かるというのはあります

Comments

[norino]

tacsheavenさん、回答ありがとうございます。
この範囲の知識がまだまだ未熟なのだと痛感しました。
しかし、とても説明が丁寧で私には分かりやすかったです。
どうもありがとうございました。

この部分を詳しく勉強できるサイトでも本でもあったら是非教えてください。
よろしくお願いいたします。