みなさん、こんにちはS.Nです！Ajaxについてまとめてみました。

はじめに

～Ajaxとは？～

▶Ajax は『Asynchronous JavaScript And XML』の略で、ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法。XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じてダイナミックHTML (DHTML) で動的にページの一部を書き換える手法です。

▶このAjaxを使うことで、Webページ全体を更新することなく「一部分だけ情報を更新する」ことが可能です。Ajaxそのものは古くから使用されていましたが、検索エンジンや地図アプリに活用されたことで、ほかのWebページやサービスでも取り入れられるようになりました。

Ajaxについて①

～非同期通信とは？～

▶Ajaxについて説明する中で避けて通れないのが非同期通信という通信方式です。非同期通信とは、コンピュータ間で送信者のデータ送信タイミングと受信者のデータ受信タイミングを合わせずに通信を行う通信方式です。非同期通信の対義語として、同期通信というものがあります。同期通信とは、コンピュータ間で送信者のデータ送信タイミングと受信者のデータ受信タイミングを合わせなければならない通信を行う通信方式です。

▶非同期通信の身近な具体例としては、GoogleMapやLINEがあります。GoogleMapでは、ユーザーが、地図を拡大・縮小するとそれに合わせて、画面上における地図の詳細が変化したり、ユーザの周りの位置情報が変化したりする。LINEでは、メッセージを送信した時に、メッセージ画面の下に送信したメッセージがスクロールされる。

Ajaxについて②

～JSONとは？～

▶JSONは「JavaScript Object Notification」の略で、JavaScriptで値を取り扱うためのドキュメント規格です。Ajax通信で取得したJSON形式のファイルを画面に表示をする形でよくつかわれていますね！

▶JSONは以下の点からAjaxにおいてもよく使用されます。
　　・①テキストベースで軽い
　　・② 解析しやすい
　　・③ JavaScriptとの相性が良い

▶JSONの基本的な書き方
　　・JSONは {} の中にキーと値をコロンで区切って記述します。
　　　キーは必ずダブルクォーテーションで囲む必要があり、シングル
　　　クォーテーションだとエラーになります。
　　・カンマで区切ると、キーと値の組み合わせを複数記述できます。

{
  "total": 3,
  "users": [{
    "name": "なまえ",
    "age": 3
  }, {
    "name": "なまえ",
    "age": 18,
  }, {
    "name": "なまえ",
    "age": 28,
  }]
}

Ajaxについて③

～Ajaxの使用例～

▶前スライドでも少し記載しましたが、AjaxはさまざまなWebページやサービスに利用されています。代表的な使用例は以下の通りです。

• 検索エンジン
  みんな大好きGoogleいつもお世話になっております（笑）

• 地図アプリ
  Google Mapも代表ですね！いつもお世話になっております。

• ECサイト
  ショッピングサイトの商品表示なんかもそうですね。

• SNSサービス
  TwitterやFacebookのタイムラインをシームレスに表示させる部分にも使用されているそうです。