HTMLデータ送信投稿_PowerNode Java Academy

HTTP/1.1 プロトコルで指定されている HTTP リクエスト メソッドには、OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT などがあります。 POST は通常、サーバーにデータを送信するために使用されます。この記事では主に、POST を使用してデータを送信するいくつかの方法について説明します。

HTTP プロトコルは ASCII コードで送信され、TCP/IP プロトコル上に構築されたアプリケーション層仕様であることがわかっています。仕様では、HTTP リクエストをステータス行、リクエスト ヘッダー、メッセージ本文の 3 つの部分に分割します。次のようになります:

<メソッド> <リクエスト URL> <バージョン>
<ヘッダー>
<エンティティ本体></エンティティ本体></ヘッダー></バージョン></リクエスト URL></メソッド>

プロトコルでは、POST によって送信されるデータはメッセージ本体 (エンティティ ボディ) に配置する必要があると規定されていますが、データにどのようなエンコード方法を使用する必要があるかは規定されていません。実際、送信される最終的な HTTP リクエストが上記の形式を満たしている限り、開発者はメッセージ本文の形式を自分で完全に決定できます。

ただし、データはサーバーによって正常に解析された場合にのみ意味を持ちます。 Java などの一般的なサーバーサイド言語とそのフレームワークには、一般的なデータ形式を自動的に解析するための関数が組み込まれています。サーバーは通常、リクエスト ヘッダーの Content-Type フィールドに基づいて、リクエスト内のメッセージ本文がどのようにエンコードされているかを学習し、本文を解析します。したがって、POST データ送信スキームには、Content-Type とメッセージ本文のエンコード方式という 2 つの部分が含まれます。それでは、正式に紹介を始めましょう。

アプリケーション/x-www-form-urlencoded

これは POST 経由でデータを送信する最も一般的な方法です。ブラウザのネイティブ フォームに enctype 属性が設定されていない場合、データは最終的に application/x-www-form-urlencoded 形式で送信されます。リクエストは次のようになります (この記事では無関係なリクエスト ヘッダーは省略されています)。

http://www.example.com HTTP/1.1 への POST
コンテンツタイプ: application/x-www-form-urlencoded; 文字セット=utf-8
タイトル=テスト&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3

まず、Content-Type が application/x-www-form-urlencoded として指定され、次に、送信されたデータは key1=val1&key2=val2 の形式でエンコードされ、key と val の両方が URL エンコードされます。ほとんどのサーバーサイド言語は、このアプローチを適切にサポートしています。たとえば、PHP では、POST['title'] は title の値を取得でき、POST['title'] は title の値を取得でき、_POST['sub'] はサブ配列を取得できます。

多くの場合、Ajax を使用してデータを送信するときにもこのメソッドを使用します。たとえば、JQuery の Ajax の場合、Content-Type のデフォルト値は「application/x-www-form-urlencoded; charset=utf-8」です。

マルチパート/フォームデータ

これは POST データを送信するもう 1 つの一般的な方法です。フォームを使用してファイルをアップロードする場合は、フォームの enctyped をこの値と同じになるように設定する必要があります。リクエストの例を見てみましょう。

http://www.example.com HTTP/1.1 への POST
コンテンツタイプ:multipart/form-data; 境界=----WebKitFormBoundaryrGKCBY7qhFd3TrwA
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
コンテンツ配置: フォームデータ; name="text"
タイトル
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
コンテンツ配置: フォームデータ; name="file"; ファイル名="chrome.png"
コンテンツタイプ: image/png
PNG ... chrome.png の内容 ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

この例はもう少し複雑です。まず、異なるフィールドを区切るための境界が生成されます。メインのテキスト コンテンツとの重複を避けるため、境界は非常に長く複雑です。次に、Content-Type は、データが mutipart/form-data でエンコードされていること、およびこのリクエストの境界が何であるかを示します。メッセージ本文は、フィールドの数に応じて、同様の構造を持つ複数の部分に分割されます。各部分は --boundary で始まり、その後にコンテンツの説明情報が続き、次に改行が入り、最後にフィールドの特定のコンテンツ (テキストまたはバイナリ) が続きます。ファイルを転送する場合は、ファイル名とファイルの種類の情報も含める必要があります。メッセージ本文は --boundary-- タグで終わります。 mutipart/form-data の詳細な定義については、rfc1867 を参照してください。

この方法は一般的にファイルのアップロードに使用され、主要なサーバーサイド言語でも十分にサポートされています。

上記の 2 つのデータ POST 方法はどちらもブラウザでネイティブにサポートされており、現時点ではネイティブ フォームではこれら 2 つの方法のみがサポートされています。ただし、ますます多くの Web サイト、特に WebApp がデータのやり取りに Ajax を使用するようになるにつれて、開発の利便性を高めるために新しいデータ送信メソッドを定義できるようになります。

アプリケーション/json

応答ヘッダーとしての Content-Type application/json を理解している必要があります。実際、メッセージ本文がシリアル化された JSON 文字列であることをサーバーに伝えるために、これをリクエスト ヘッダーとして使用する人が増えています。 JSON 仕様の普及により、IE の下位バージョンを除くすべての主要ブラウザは JSON.stringify をネイティブにサポートしており、サーバーサイド言語にも JSON を処理する機能があるため、JSON を使用する際に問題が発生することはありません。

また、JSON 形式は、単なるキーと値のペアよりもはるかに複雑な構造化データをサポートする点も便利です。数年前にプロジェクトに取り組んでいたとき、送信する必要のあるデータ レベルが非常に深かったため、送信する前にデータを JSON にシリアル化したことを覚えています。ただし、JSON 文字列を val として使用し、キーと値のペアに入れて、x-www-form-urlencoded 形式で送信しました。

Google の AngularJS の Ajax 関数は、デフォルトで JSON 文字列を送信します。たとえば、次のコード:

var data = {'title':'test', 'sub': [1,2,3]};
$http.post(url, data).success(function(result) {
...
});

送信された最終リクエストは次のとおりです。

http://www.example.com HTTP/1.1 への POST
コンテンツタイプ: application/json;charset=utf-8
{"title":"テスト","sub":[1,2,3]}

このソリューションは、複雑な構造化データを簡単に送信でき、RESTful インターフェースに特に適しています。 Chrome の組み込み開発者ツール、Firebug、Fiddler などの主要なパケット キャプチャ ツールは、JSON データをツリー構造で表示するので、非常に使いやすいです。ただし、一部のサーバーサイド言語では、この方法がまだサポートされていません。たとえば、PHP では、上記のリクエストから $_POST オブジェクトを介してコンテンツを取得できません。この時点では、リクエスト ヘッダーの Content-Type が application/json の場合、php://input から元の入力ストリームを取得し、それを json_decode してオブジェクトに変換する必要があります。一部の Java フレームワークではすでにこれが始まっています。

もちろん、AngularJS は x-www-form-urlencoded を使用してデータを送信するように構成することもできます。

テキスト/xml

XML-RPC (XML リモート プロシージャ コール)。伝送プロトコルとして HTTP を使用し、エンコード方式として XML を使用するリモート呼び出し仕様です。典型的な XML-RPC リクエストは次のようになります。
http://www.example.com HTTP/1.1 への POST
コンテンツタイプ: text/xml
<!--?xml バージョン="1.0"?-->
<メソッド呼び出し>
<メソッド名>examples.getStateName</メソッド名>
<パラメータ>
<パラメータ>
<値><i4>41</i4></値>
</パラメータ>
</メソッド呼び出し>

XML-RPC プロトコルはシンプルで機能的であり、さまざまな言語で実装されています。 WordPress の XML-RPC Api や検索エンジンの ping サービスなどでも広く使用されています。 JavaScript には、このような方法でデータのやり取りをサポートする既製のライブラリもあり、既存の XML-RPC サービスを適切にサポートできます。しかし、個人的には、XML 構造はまだ肥大化しすぎており、一般的なシナリオでは JSON の方が柔軟で便利だと考えています。