AJAX
2020/09/04 06:00
快適なWEBのUIを作成する技術、AJAXについて動画でわかりやすく解説しています。ホワイトボードの概念解説の後、実際のWEBサイトを使ってどのような箇所で利用される技術なのかを確認しました。さらにサンプルコードを見ながらブラウザ上で動くコードを開発者ツールを利用して確認するなどしています。概念解説、コードの解説ともに13分の動画です。
AJAXとは
ブラウザに内蔵されているJavaScriptからHTTP通信を起こせる技術です。以下のような利点があります。
- 何かを操作している最中に裏側で通信を行うことができる（非同期で通信する）。
- 通信後の画面更新を待たなくても良いので、ユーザーが快適に操作できる。
その他
開発者ツール
コードで理解するところではGoogleChromeに実装されている開発者ツールを使って通信の内容を確認しています。実際に開発する際にもこのツールを使ってよく通信の状態をよく見ます。
URLを入れてJSONのレスポンスを確認する
開発者ツールを使わなくても、GET通信を確認する場合にはブラウザに直接URLを入力して通信する事でレスポンスの中身を確認することができます。
補足情報
ここでは概念の説明と、実際にソースコードを書いての動きを確認しています。利用したソースコードは以下から確認してください。
https://github.com/CircleAround/pgonline/tree/master/src/20200704_ajax
