イントロダクション
今回は、非同期通信でのPOSTリクエストを理解します。あくまでも。「非同期通信」の時にPOSTリクエストを行うので次の二つを理解しましょう。
- 非同期通信
- POSTリクエスト
前回KMLファイルがなんたら。。。と記載しましたが、結局のところはGoogle Mapの選択した位置にピンを落とす処理を追加しました。
非同期通信で、画面の一部を変更するサンプルです。この動画ではAngularJSを使用しています。
イメージ図
非同期通信処理(Ajax)
今回は、ここから非同期で記載した情報をサーバーに送信、JSONファイルを出力する処理を実装しようと思います。
早速ですが、非同期通信について触れておきます。非同期通信でのPOSTリクエストの前に、非同期通信について理解しましょう。
細かいところをいじる
ちなみに、jQueryとかでは1行でリクエストを飛ばせるようにコードが書かれていなす、もし、細かい部分をいじりたい時には、下のような実装を行うと細かい操作が可能になります。
非同期通信とは
よく、PHPなどのプログラミング言語を使用したときには、「画面遷移」を行うときに「POST]もしくは「GET]リクエストを送信して、改めてHTMLをロードしますが、非同期通信の場合は、現在表示しているHTMLの一部を更新するという形の処理を行います。
※リクエストについて
非同期なので、レスポンスがいつ帰ってくるのかがわかりませんが、POSTなどの通常リクエストよりは早いです。※非同期処理
なぜかというと、送受信するデータの量が少ないことが多いからです。
※「多い」というの処理の内容に依存するためこのような言葉を使いました。
同期通信
HTMLフォームを使用して画面を遷移したり画面をリロードしたりするようなURLを更新するような通信のことを同期通信と言います。まぁ通常のリクエスト送信だと思っていただいて間違い無いと思います。
非同期通信
それに対して、非同期は何が違うのかというと画面の一部分を更新するときによく使います。
画面を表示したときに「loading ....」なんて表示されているのがこれです。
同期通信の場合
リクエスト送信した後に「レスポンス(次のページを受け取る)を待ちます。
<非同期通信>
リクエスト送信した後に「レスポンス」を待ちません。
なので「loading ...」なんて処理を行いながら「レスポンスが帰ってくる」のを待っています。
ポイント
レスポンスを待たなくて良いので次の処理が実行できるというわけです。「待ち」の時間が減るのでユーザーに優しい実装になります。
POSTリクエスト
POSTリクエストは、単純にHTMLで
<input type="submit">
と書いたFormタグのメソッド属性にpostと書くだけです。処理の内容としては、サーバー側に送信するデータをURLなど人の目に見える場所に表示しません。パスワードなどの情報を送受信するときに使用します。
<form action="次に表示するファイル(php, htmlなど)" method="post"> <input type="submit"> <input type="submit" value="送信する"> </form>
今回の用途
地図上の情報を取得、写真をサーバーに送信しJSONという形で保存しようという処理を実装しよう、というお思惑です。
前回記載しました内容の処理を実装します。
JavaScript
最近ではAngluarとかJQueryとかいろんなもの(フレームワーク?)がありますが、面倒なので使用しません。HTML5の仕様読みましたが、かなりの範囲を網羅する形でAPIが提供されているので、わざわざ他のJSライブラリなどを使用しなくて良いと思った次第です。
→話(使用する部品)がややこしくなるのであまり使いたくありません(笑)。
XmlHttpRequest
下のようなコードは、おそらく、jQueryなどでは内部的に実装されています。コードを見てはいませんが。。。
久しぶりに使用します。非同期通信を行うときに使用するオブジェクトです。他のライブラリなどはこいつを使用しているのでハナっからこの部品を使ってしまいます。APIドキュメントはこちらにあります。ドキュメントページからコードを失敬。。。
こいつをベースにして、ファイルなどのデータを送信する処理を実装しようと思います。
あとは、ソースを眺めながら考えます(笑)。
でわでわ。。。
- JS GoogleMaps API 〜オリジナル・データマップを作ろう〜
- Github page 〜Github pageでリポジトリの情報を公開しよう〜
- 夢を形にする① 目標ブレーク〜じゃんけんゲームの場合〜
- プログラム 習得 順序1 概要