フロントエンドは一生やらないかもしれないと思っていたけど、仕事で必要になったのでAjaxについて勉強することになりました。
JavaScriptやjQueryはProgateで少し触ったことがあったような気がしますが、AjaxはJavaScriptで書くプログラムで、ライブラリとしてjQueryを使うことができます。
Ajaxは非同期通信のための技術
非同期通信と言われると「え、実行する順番がまちまちなの、そんなプログラム組めるわけない」という気持ちになります。
しかし非同期というのはWebの世界では当たり前で、たとえばGoogleマップがAjaxを使用したおそらく最も有名なアプリだと思います。
Googleマップがしていることは、画面を再読み込みしたり画面遷移したりせずに、地図などの情報を更新し続けるということをしていますよね。
Ajaxの基本的な処理の流れ
コンピュータ上で、どのようにAjaxが実行されるか考えてみました。
- HTML（XML）からJavaScript起動
- JavaScriptでHttpRequestオブジェクトを生成
- サーバにリクエスト（GET、POST）を送信
- サーバ応答からJavaScriptで処理を実行
- Ajaxのコードを実行
どのようにプログラムとして記述するのかも大事ですが、まず処理の流れを理解しておくのは大事だと思います。
Ajaxのコード記述方法
処理の流れに対応するコードをサーバサイドも含めて記述していくのですが、色んなところで紹介されているのでリンクを貼っておこうと思います。
なんとなく理解できたような気になれて、仕事でも対応できそうな気がしてきたのでよかったです。