jQueryでpostJSONする方法についての覚書
Ajaxで$.getJSONを使う時、パラメータが長すぎると「414 Request URI too long」が返ってくる。 「getとpostの違いがわかればすぐに解決する」と言われたので調べてみた。 とりあえず調べ […]
Ajaxで$.getJSONを使う時、パラメータが長すぎると「414 Request URI too long」が返ってくる。
「getとpostの違いがわかればすぐに解決する」と言われたので調べてみた。
目次
とりあえず調べてみる
getとpostについて調べる
せっかくなのでHTTP1.1 RFC2616の日本語訳を読んでみた。
9.3 GET
GET メソッドは、Request-URI で識別される (エンティティ形式の) 情報な
らなんでも回収する事を意味する。もし、Request-URI がデータ生産プロセ
ス{data-producing process} を参照するのであれば、それはレスポンスのエ
ンティティとして返されるであろうとして生産されるデータであり、もしそ
のテキストがプロセスの出力として生じるのでなければ、プロセスのソース
テキストではない。
<以下略>9.5 POST
POST メソッドは、サーバがリクエストライン内の Request-URI により識別
されるリソースへの新しい従属{subordinate} として、リクエストに同封さ
れるエンティティを受け入れる事を要求するために使用される。POST は以下
の機能のカバーするための画一的メソッドとして設計されている。– 既存リソースの注釈
– 掲示板、ニュースグループ、メーリングリスト、あるいはその類の記事
グループへのメッセージの投稿– フォーム提出の結果のような、データ処理プロセス {data-handling
process} へのデータブロックの供給– 追加動作を通したデータベースの拡張
POST メソッドによって実行される実際の機能はサーバによって決定され、通
常は Request-URI に依存する。ポストされたエンティティは、ファイルが
ディレクトリに従属し、ニュース記事がそれがポストされたニュースグルー
プに従属し、レコードがそのデータベースに従属しているという事と同じ形
で、その URI に従属する。
<以下略>
なるほど、わからん。
初心者向けに説明してみたという記事があったので、とりあえずこんなものかとザッと把握した感じにしておく。
・GETとは？
GETとは、内容を「取ってくる」というイメージです。URLで指定された住所へページを取りに行って、それを見ます。とても単純な仕組みです。・POSTとは？
POSTとは、ポストにあなたの要求を「投函し」、内容を「送り返してもらう」イメージです。投函するときに、あなたはいろいろなデータをそこに書き込めます。受け取った人は、それを読んで、その内容に応じた応えをあなたに返します。GETに比べると複雑な仕組みです。
414エラーで調べてみた
エラー文（414）で検索すると、こういうものが出てきた。
3.2.1 一般構文
<中略>
HTTP プロトコルでは、URI の長さにどんな制限も設けていない。サーバは、
自身が持つどんなリソースの URI も扱え *なければならない* し、もしその
ような URI を生成する GET ベースのフォームを用意するなら、無制限の長
さの URI を扱える *べきである*。もし、その URI がサーバが処理できるも
のよりも長ければ、サーバは 414 (Request-URI Too Long) ステータスを返
す *べきである* (section 10.4.15 参照)。
www.spencernetwork.org/reference/rfc2616-ja-HTTP1.1.txt
とりあえずHTTPの仕様としてGETもPOSTもURIの長さに制限は設けられていないということでしょうか。
もうちょっと調べてみると「Chrome/Firefoxは無制限、IEは2083byteまで」というブラウザ側の制限とApacheによる制限（デフォルト値上限8190byte）があるみたいです。
参考：https://httpd.apache.org/docs/current/en/mod/core.html#limitrequestline
getではなくpostでJSONを扱う
「getJSONで414エラーが返ってくるなら、postJSONを使えばいけるんじゃないか？」と直感的に思うわけですが、実際のところpostJSONなんてメソッドは存在しません。
「postJSON」でググると大体このコードが紹介されていますので、自作して使うのが一般的な様子です。
[html]
jQuery.postJSON = function(url, data, callback) {
jQuery.post(url, data, callback, "json");
};function use_post_json(){
$(document).ready(function() {
$.postJSON("https://localhost/json.php",{target_list:’1,2,3′},
function(data) {
alert(data);
});
});
}
[/html]
jQuery.getJSONとjQuery.postJSON – oggataの日記
postJSONの中身を見ると、$.postに３つ引数を渡しつつdataTypeをJSONに固定させている様子。
つまりはこうも書けそうな予感。
[html]
function use_post(){
$(document).ready(function() {
$.post(
"https://localhost/json.php",
{target_list:’1,2,3′},
function(data) {
alert(data);
},
"json"
);
});
}
[/html]
そして$.postは$.ajaxの略記なので、$.ajaxを使って書くことも出来そう。
[html]
function use_ajax(){
$(document).ready(function() {
$.ajax(
type: ‘POST’,
url: ‘https://localhost/json.php’,
data: {target_list:’1,2,3′},
success: function(data) {
alert(data);
},
dataType:"json"
);
});
}
[/html]
・・・なんかこっちのほうがわかりやすい気がしてきたのは自分だけですかね？
postJSONを使う機会が多い時はpostJSONメソッドを作った方が効率的だと思いますが、１～２回程度ならば$.ajaxか$.postで処理してしまったほうが手っ取り早いのではと思います。
ブックマークや限定記事（予定）など
WP Kyotoサポーター募集中
WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。
14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。