【初学者によるまとめ】この一冊で全部わかるWeb技術の基本 「Chapter 5」＞「09 Ajax」

• 目的：「イラスト図解式 この一冊で全部わかるWeb技術の基本」の要点を自分なりにまとめアウトプットして理解力の向上に努める。
• 今まで「きれいにまとめる」事に時間を割きすぎていたためポイントを抑えるイメージで学習する方針へ変更

注意点
🤔 ←この絵文字の文章は個人的な見解になります。的外れなこともあるかと思います。
例）🤔<(感想、考察、疑問点など)

---

（参考書籍）

1. イラスト図解式 この一冊で全部わかるWeb技術の基本

（参考サイト）

https://hnavi.co.jp/knowledge/blog/ajax/#title1

---

(09) Ajax は JavaScript が独立して行う通信

同期通信、非同期通信

• 同期通信 ... 通信を行ったときに、送信した側が受信側からの応答を待ってから次の処理に進むやり方
  • [メリット]：確実にサーバー側からのレスポンスを受け取ることが可能
  • [デメリット]：待っている間は他処理が何もできないため時間がかかる
• 非同期通信 ... 通信を行ったときに、送信した側が受信側からの応答を待たずに次の処理に進むやり方
  • [メリット]：待っている間に他の処理を進めることが可能 → 全体の処理効率が良くなる
  • [デメリット]：処理の実行タイミングをうまく管理しないといけない

（図１：同期通信のイメージ図）

Ajax

• Ajax ("Asynchronous JavaScript + XML" ... 「非同期 JavaScript + XML」)
  • 非同期通信を使ってウェブページを更新するための技術
  • ページ全体を再読み込みしなくても、特定の部分だけを更新が可能
    • 入力予測や検索候補の表示などが該当

※ XML とあるか近年は JSON が一般的

• リクエストを送っていないわけではなくて、ページの一部分だけの更新のためにリクエストをブラウザから送っている
  • 画面全体をリロード (再読み込み、再ダウンロード) はしていない

• ブラウザからのリクエストによる画面全体がロードされる → 後の操作で一部ページ更新が要求される → JavaScript がその部分に関して取得するリクエストをブラウザにお願い → ブラウザからリクエストを送信 → その部分をリロードせず描画