最近JavaScript周辺の勉強を始めたので、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！
HTTPプロトコルとは
HTTP(Hyper Text Transfer Protocol)は、クライアント（例えばChromeなど)とWebサーバーの間で、HTMLで記述されたWebページや画像、音声ファイルなどを転送しウェブ(World Wide Web)の世界を通信するためんのプロトコル（通信規約）です。
メッセージやリソースに特殊文字、日本語などの複数バイトの文字バイトが含まれている場合はURLエンコードをしてから送信する。
HTTPによる通信
HTTPでは、クライアントがサーバーにリクエストメッセージを送信しサーバーがこれに対してレスポンスを返します。通常の場合はHTTPリクエストを返すとブラウザを更新してしまい、ページ遷移する場合などにブラウザの状態をリセットしてしまいます。
レスポンスを返した時点でサーバーは初期状態に戻り、この際サーバーはクライアントの状態を保存しません。また通常のHTTP通信では同期通信なのでレスポンスが返ってくるまでロックされて何もできない状態になります。
Ajaxとは
従来の同期通信を改善する為にできたのがAjaxです。
Ajax(Asynchronus JavaScript and XML)はサーバーと通信を行う為の技術です。
XMLHttpRequestというJavaScriptのオブジェクトを利用してWebサーバーと非同期通信をおこないます。
DOM操作を利用してダイナミックにWebページを書き換えるプログラミングの手法です。
非同期通信とはサーバーからレスポンスが返ってくるのを待つことなく、他の作業を進める事ができます。この間、ユーザーは他の処理をする事ができます。逆に同期通信とはレスポンスが返ってくるまで他の作業をする事ができません。
Ajaxの重要な機能は、ページを遷移する事なくサーバーと通信を行うことです。
Ajaxを利用した通信
Ajaxを用いたサービスで有名なものはGoogle mapです。
この場合、ユーザーによって見たい場所が変更されると、クライアント側のJavaScriptプログラムが現在のページで足りない部分を見つけて、その部分を送ってもらうようにリクエストを送信します。サーバーは、このリクエストを受信し、足りないデータの部分だけを送信します。クライアントはこれを受信し、DOMを使って必要部分を変更し表示します。
- Ajaxの特徴
- 最小限のデータ通信でけで済む為、処理が高速でサーバーへの負荷が少なく、通信トラフィックへの負荷も小さい
- 非同期通信を行うユーザーの操作をロックしない
- Webページの更新はクライアント側で行い、ページ遷移を伴わない部分変更を行う為、高速に描画できる。