何も知らないところからAjaxを学んだのでまとめてみた

Ajaxとは何か

AjaxはAsynchronous JavaScript + XMLの略。
非同期でjavascriptとXMLを使ってサーバーとやりとりをするって理解。
サーバーとのやりとり？ってなる方はまずHTTPの仕組みを理解する必要があると思います。（実際のところ僕も大枠しかわかってないので偉そうなことは言えませんが）
このサイトがとても分かりやかったです。
https://app.codegrid.net/entry/ajax-1#toc-5
本なら「WEBを支える技術」です。（デザイナーの僕には難しかったですが）

非同期通信ってなに？

非同期通信は、一部の情報をwebブラウザからサーバーにリクエストを行なってレスポンシブがくることです。
よく言われるのが、サイトで何かアクションをした時に画面が一度白くなるのが同期通信。
サイトが一度も白くならずアクションによって一部変化するのが非同期通信と説明しています。
しかしこれだけだとなぜ白くなるのかよく分かりませんでした。
クライアントとサーバーのやり取りの中でクライアントからHTTPリクエストを送った時に、HTTPレスポンスがサーバーから返ってくるまでずっと待機する必要があります。この状態が真っ白になると言うことです。

その「白くなる」ことがなく、ページの一部が変化させることができるのがAjaxです。
この言い方をすると誤解を招きますが、Ajaxは言語ではなく手法です。

Ajaxのメリットってなんなん？

###表示速度が速い
皆さんも経験したことがあると思いますが、ページで何かアクションをした際にずっと真っ白な状態・・・長いな・・・って思うことがあります。それは先ほどお話しした同期通信です。
一部分だけしか変わらないのに同期通信はページ全体を（再）読み込みするため、ページ全体のコードを全て読み込む必要があります。
非同期通信はリクエストを送った後、待機せずに別の処理を進めていて、レスポンスが返ってきたら処理を再開することができるし、ページ全体ではなくアクションをした時の一部分だけを読み込むため表示速度が速い。

自分の言葉で伝えると
僕の言葉でまとめるとAjaxを使用することで操作性が向上し、ユーザーにストレスを与える機会を減らせるものだと思っています。ユーザーの体験をよりよくし、「使いやすいサイトだな」と思ってもらえることは再訪やLTVにも繋がる重要なものだと思っています。
GoogleMapがいい例で、今では非同期通信のためマップの位置をずらしてもなんの変化もありませんが、昔はマップの位置を変更すると一度真っ白になってから読み込みを行い表示されます。めちゃストレスですよね。
このように、Ajaxを利用することは操作性を向上させ、ユーザーにストレスを与える機会を減らせることができるの1つがAjaxだと思います。

ここで感じた疑問を @sho0211 に投げかけてみた

Ajaxに全く知識がなかった中で疑問に感じたことはこの2点です。

・一部の情報をwebブラウザからサーバーへリクエストするのは同期通信も一緒。
　なぜ真っ白にならないの？ロジックが知りたい。
・じゃあ全部非同期にすればええやん

Ajaxの同期・非同期、そしてSPAについて
めちゃ面白いたとえ話でアンサーして頂きました。
ありがとうございます。
僕のように同じ疑問を思った方はぜひ参考にしてください。

Ajaxの仕組み

こちらに関しては@hisamura333さんのhttps://qiita.com/hisamura333/items/e3ea6ae549eb09b7efb9
記事を参考にしています。とても分かりやすいのでぜひご覧ください。

色々調べる中で僕がそうなんだ！と思ったのは、Ajaxは**「昔ながらの技術、そして新しい工夫」**だと言うこと。
なんかかっこいいですよね。笑　最近の技術だと思っていたら昔ながらの技術を工夫してできているのかと言う真実は自分の中で強く印象に残っています。

さて、Ajaxの仕組みは大きく分けて4つの技術が合わさってできています。

・XMLHttpRequest
・JavaScript
・DOM
・XML

XMLHttpRequest

XMLHttpRequestはこのような形で作成できます。

<script language="javascript" type="text/javascript"> 　var xmlHttp = new XMLHttpRequest(); </script>
IBM Developerより

これがサーバーとの通信全てを処理するもの(HTTP通信)でAjaxの基幹技術です。
WEB上で実行されるJavaScriptからwebサーバーへHTTPリクエストを送信して、サーバーから返ってきたHTTPレスポンスをページ上に反映させるものです。
XMLHttpRequestを行うことで、JavaScriptエンジンからサーバーへリクエストが行えるため非同期通信ができます。
ちなみにこれはJavaScriptのAPIです。

JavaScript

XMLHttpRequestはJavaScriptの組み込みオブジェクトです。
AjaxとはAsynchronous JavaScript + XMLの略といったように、JavaScriptを使わないと実装できません。
Ajaxのソースコードは基本JavaScriptで構成されています。

DOM

Ajaxを使用して動的なWebページを作成するときにHTML・XML上のどの要素を変更するか指定するために使われます。
DOMはHTML・XMLをツリー構造として展開して、アプリケーション側に文章の情報を伝え、加工や変更をしやすくします。

XML

XMLは、Extensible Markup Languageの略。
タグを自由に設定して、そのタグに対して意味づけを行うものです。
HTMLもXML形式なので似たようなものと説明されますが、HTMLタグにも意味があるようにXMLも同じです。

<お魚料理>
　<レシピ>
　　<魚>鯖</魚>
　　<調味料>塩</調味料>
　</レシピ>
</お魚料理>

データのやりとりでXMLを使えば、複数のデータを同時にやりとりしてもどのデータがどの要素なのか一発で判定できます。
今ではXMLよりJSONがよく使われており、XMLじゃないといけないと言うわけではありません。
余談ですが、僕の記事では魚料理がよく出るのは釣りが大好きだからです。

Ajaxのまとめ

・ユーザーがアクションをする（イベント）
・Javascript+XMLHttpRequestでサーバーに対してリクエストを送信①
・サーバー処理が走る②
・処理結果をJSONやXMLなどの形式でレスポンス
・その情報をもとにDOMを操作しページを更新する③

①サーバーに対してリクエストをするときに必要なものだけリクエストをしていること
②サーバーからレスポンスがくるまで、違う処理を実行できる
③必要な部分だけ更新するので白くならない

と言うことです。
同期通信はブラウザからサーバーへリクエストをしてその処理が返ってきたタイミングでページ全てを新しい内容に置き換えますが非同期通信は、必要な情報をブラウザからサーバーへリクエストして必要な情報だけJavaScriptが受け取りDOMを変えます。
加えて、リクエストを送ってサーバーが処理している間は同期通信は待機するけど、非同期通信は待機せず別の処理を行います。

概要を理解したので書いてみました(jQuery)

利用させていただくのは、郵便番号検索APIです。(http://zipcloud.ibsnet.co.jp/doc/api)
イメージとしては、7桁の番号を記入して検索ボタンを押すと外部APIへリクエストを送り返ってきたデータ（住所や郵便番号）を反映させます。
ということでまずはinputと反映した時のHTMLを作ります。

事前準備

  <h1>郵便番号</h1>
  <input type="text" id="zipcode" value="" maxlength="7">
  <input type="button" id="search_btn" value="検索">
  <p id="postCode">郵便番号：[ここに返ってきたデータを入れる]</p>
  <p id="address">住所：[ここに返ってきたデータを入れる]</p>
  <p id="caution"></p>
  <p id="always"></p>

コードと見た目はこんな感じです。 ここまでできたらjQueryでAjax処理を書いていきます。

jQueryでAjax処理を書いていく

<script>
    //search_btnをクリックしてAjax通信を行う
    $("#search_btn").on('click', function () {
      $.ajax({
        url: 'http://zipcloud.ibsnet.co.jp/api/search', //通信先
        type: 'GET', //HTTPメソッド
        data: { //送信するデータ
          zipcode: $("#zipcode").val()
        },
        dataType: "jsonp", //応答データの種類
      }).done(function (data) { //通信成功時の処理
        var results = data.results[0];
        $("#address").append(results.address1 + results.address2 + results.address3);
        $("#postCode").append(results.zipcode);
      }).fail(function (data) { //通信失敗時の処理
        $("#caution").html(data.message);
      }).always(function (data) { //通信成功・失敗に関わらない処理
        $("#always").html('通信完了');
      })
    });
  </script>

コードは綺麗じゃないと思います。すみません・・・
どのような内容かはコメントに残してあります。
これを実行すると・・・

###実行した時の表示

画面が白くならず反映させることができました！
まだまだ複雑な処理はできませんが、Ajaxの概要から操作することはできたかなと思います。

#Ajaxでのまとめ
Ajaxのような操作性を向上させてユーザーにストレスを与える機会を減らす技術は本当にすごいなと思います。
また、昔ながらの技術で新しい工夫という点も自分自身見つめ直すいい機会だったと思います（すぐ新しいものに手をだす癖があるので・・・笑）
自分のような初歩的な部分から分からない方の参考になればと思います。