質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.35%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 575

score 9

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は何バイト以上とか、何バイトまでとかってあったら教えて欲しいです。

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+2

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.                                |       |


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/08/21 20:59

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

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

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

    キャンセル

  • 2020/08/22 01:02

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

    キャンセル

+1

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/08/20 21:33

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

    キャンセル

  • 2020/08/20 22:22

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

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

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

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

    キャンセル

  • 2020/08/21 09:32

    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);

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

    キャンセル

  • 2020/08/21 20:50

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

    キャンセル

checkベストアンサー

0

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

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/08/21 21:15

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る