Ajaxについてわかりやすくまとめてみた！

初学者ですがまとめてみました。
至らぬ点、間違っている点がございましたらご指摘くださいませ。

Ajax通信の登場人物

・クライアントくん
サーバーくんとは仲良しだけどいつも要求ばかりしている、
サーバーくんと二人きりでお話しすると変な間が入ってちょっと気まずい。

・サーバーくん
クライアントくんと仲良し！けど二人きりだと変な間が入る
いつもクライアントくんの言うことばかり聞いてる。
XMLHttpRequestと言う道具を使ってJavascriptくんと文通している。

・変な間
クライアントくんがサーバーくんに要求をしてから要求の結果が返ってくるまでの間。
謎の力によってクライアントくんは動けなくなる。

・JavaScriptくん
クライアントくんともサーバーくんとも仲良し！！
3人でいると変な間が入らず、めちゃくちゃ会話が弾む。
実はクライアントくんの行動を監視している。

Ajaxとは

Ajaxとは「Asynchronous JavaScript + XML」の略
Asynchronousとは、非同時性の、非同期の、と言う意味です。
XMLとは、XMLHttpRequestと言うAPIの略です。
要するに、「JavascriptとXMLファイルによってサーバーと非同期通信を行う」ということです。

同期・非同期とは

そもそも同期・非同期って何だろう？

クライアントくんはサーバーくんにいつも要求ばかりしています。
クライアントくん)　ねぇねぇサーバーくん、美味しい焼肉屋を探したいから食べ○グのページを見せて！

サーバーくん) 　本当にクライアントくんは食いしん坊だなぁ、わかったよ、ちょっと待っててね！　

変な間・・・・・　クライアントくん(う、動けぬ、、、)

サーバーくん)　はい！これが食べ○グのページだよ！

クライアントくん)　わぁ〜、ありがとう！

クライアントくんがサーバーくんに要求（今回は食べ○グのページを見せて）を言ってから変な間があいて食べ○グのページが返ってきました。

クライアントがHTTPリクエストを送ってから、HTTPレスポンスがサーバーから返ってくる間待ち続ける通信方式を同期と言います。

逆に非同期は、HTTPリクエストを送ってからHTTPレスポンスがサーバーから返ってくる間、クライアントが待つことなく動き回れることを言います。

XMLHttpRequestとは

クライアントくん（ウェブブラウザ）上で動くjavascriptくんが直接サーバーくんとのやりとりを行う際に使用するオブジェクトです。
データ形式はXML形式に限りません。(jsonでも可能です)
javascriptくんはサーバーくんとのやり取りで得たデータをクライアントくんに渡すことができます。

結局Ajaxで何ができるの？

クライアントくん)　ねぇねぇサーバーくん、兵庫県にある焼肉屋さんの一覧を見せて！

サーバーくん) 　本当にクライアントくんは食いしん坊だなぁ、わかったよ、ちょっと待っててね！　

JavaScriptくん )　(シュバババババ)僕がサーバーくんと一覧情報のやり取りをしてるから、クライアントくんは好きに動いてていいよ！

クライアントくん)　Javascriptくんありがとう！　謎の力が発動せず自由に動けるよ〜（カーソルビュンビュン）

サーバーくん)　JavaScriptくんこれが一覧だよ！

JavaScriptくん ) 　ありがとうサーバーくん、json形式でくれたんだね！これを見やすく加工してクライアントくんに届けるぞー

クライアントくん)　わぁ〜、ありがとう！

JavaScriptくん )　クライアントくんの行動（クリックやスクロール）に合わせて必要な情報があれば取ってくるぞー

JavaScriptくんが必要な情報(今回は焼肉屋さんの一覧)を取得してくれたことで、クライアントくんが投げるHTTPリクエストが必要なくなり変な間が発生しませんでした。
また、HTTPリクエストは必要な情報以外(HTMLやCSS)もセットで持ってきてしまうため、
サーバーくんに負荷がかかってしまいます。

Ajaxを使うことで必要な情報を負荷をかけず、変な間も発生させずに持ってくることができました！
すごいAjax!

終わりに

浅い知識のままアウトプットに及んだゆえ、至らぬ点が多々あったと思います。
気になる点があれば、ご遠慮なくお申し付けください。

スキルは可変、日々精進。
これからも頑張っていきます。