Ajaxを実装しようと思った時にHTTPの知識が必要になった.Ajaxと言えば,ページの更新をしなくても動的にページ上のデータが更新されていくtwitterのTLやgoogle Mapの地図を一部表示する際に用いられている技術である.非同期通信の一つである.非同期通信ではリクエストを送ったあと、いったん放置して別の作業を進めておき、レスポンスが返ってきたタイミングで、そのあとの処理を再開する.そのため,ユーザーはレスポンスを待機する必要がなく,ほかの作業を進めることができる.
これを学ぶためにはHTTPを理解する必要がある.
HTTP通信の仕組み
クライアント (ブラウザなど)がサーバーにリクエスト(要求)を送り,レスポンス(結果)を受け取る
リクエストとレスポンスの構造
リクエストの構造
以下がリクエストの例である
POST /www.yoheim.net/ HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.54 Safari/536.5
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: Shift_JIS,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Content-Type: text/plain
Content-Length: 23
key1=value1&key2=value2
1行目(リクエストライン):メソッド、リクエストURI、プロトコルバージョンで構成される.この例では「HTTPのバージョン1.1で通信を行い、/www.yoheim.net/ というURIに対して、POSTメソッドでリクエストします。」という意味になる.
2行目から14行目(ヘッダー):User-AgentとかCookieとかAcceptとか色々な情報を指定する.最後の空行の1行目はヘッダーの終わりを示す.
15行目(メッセージ):POST通信で用いられる,クライアントがサーバーにデータを送る際に付与される.
レスポンスの構造
以下がレスポンスの例である
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Date: Thu, 27 Nov 2014 11:36:47 GMT
<!DOCTYPE html>
<html lang="ja" data-env="prod" data-runapp>
...
</html>
1行目(ステータスライン):サーバーでの処理結果を伝える情報.プロトコルバージョン,ステータスコード,テキストフレーズで構成される.成功時は200 OKと表示されるが,失敗した時に,404 Not Foundや500 Internal Server Errorと表示される.
2行目と3行目(ヘッダー):メッセージボディのタイプや文字コード、サイズ、メッセージを生成した日付といったレスポンスするデータの情報や、サーバーのソフトウェア情報が含まれる.
ChromeのDevToolsのNetworkタブからリクエストとレスポンスを確認できる.長くなったので今回は以上
続く
##参考
https://app.codegrid.net/entry/ajax-1
http://www.yoheim.net/blog.php?q=20120611