#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!
###終わりに
浅い知識のままアウトプットに及んだゆえ、至らぬ点が多々あったと思います。
気になる点があれば、ご遠慮なくお申し付けください。
スキルは可変、日々精進。
これからも頑張っていきます。