🐈
JavaScript②(Ajax)
昨日の復習・Ajax（Asynchronous JavaScript and XML）通信とは
Ajax（Asynchronous JavaScript and XML）通信とは
HTMLの一部を追加で読み込む通信方法
ページを再読み込みしない・サーバーから結果待たずに画面書き換え
これらの「非同期通信」を実装するのを、Ajaxと呼ぶ！
- ページ全体を再読み込みせずに、一部だけを非同期で読み込む通信手法
- JavaScript を使って、裏側でデータを取得・送信し、ページの一部に反映する
- 従来のHTML通信ではページ全体が再読み込みされるが、Ajaxでは必要な部分だけ更新できる
具体例
- SNSや動画サイトなどで、スクロールすると新しい投稿や動画が自動で表示される仕組み
- 読み込み中に「ぐるぐるマーク」などが表示される
- この追加読み込みが Ajax による非同期通信
Ajaxではない例
- 「次へ」ボタンをクリックしてページ遷移するGoogle検索などの挙動は、Ajaxではない
- ページ全体が再読み込みされる通常のHTML通信
Ajaxの処理の流れ
- クライアント側でボタンクリックなどのイベント発生
- APIを使って非同期通信でサーバー宛にリクエストを送る
- サーバーが処理を行う
- JSON形式でレスポンスを返す
- クライアント側の画面が更新される
Web API
API（Application Programming Interface）
Web上のサービスを利用するためのインターフェース（出入口）
Web上でやり取りをするので、違う言語同士でも連携でき、他サービスと組み合わせて新しいサービスを生み出すことができる。（マッシュアップ）
PayPayやgoogle翻訳のAPIも存在する（こういうのは実際の業務でも使いそう）
JSON（JavaScript Object Notation）とは
テキストベースのデータ交換形式フォーマット。
データのやり取りする際、クライアント側とサーバー側のどちらも理解できるデータ形式にできる。
かつてはXMLを使用していたが、わかりづらいため今はJSONを使用することが多い。
- 軽量で読みやすい！
- コードが短い
- 違う言語同士でのやりとりに最適
CSVとは
CSV(Comma Separated Values/カンマ セパレーティド ヴァリューズ)
現職ではCSVファイルを使用している。
CSVは、XMLよりも前に使われていた。テキストとカンマだけで構成される。
用途
- システムのアップロード・ダウンロード
- データベースへのインポート・エクスポート
現職だと、一括で情報を登録したりする際にCSVファイルを使用している。
Discussion