AJAX 是什麼？

AJAX（Asynchronous JavaScript and XML）是一種讓網頁可以在不重新整理整個頁面的情況下，與伺服器溝通、更新部分內容的技術。

• JavaScript 在背景發送請求給伺服器
• 伺服器回傳資料（通常是 JSON）
• JavaScript 收到資料後，只更新頁面中「需要變動」的那一小塊 DOM
• 使用者感覺不到頁面有重新載入

比起傳統網頁請求改善了什麼？

• 速度感更好：不用重傳整個 HTML、CSS，只傳需要的資料
• 使用者體驗更流暢：不會有整頁白屏、重新渲染的閃爍感
• 保留頁面狀態：像是滾動位置、已輸入的表單內容都不會被清掉
• 降低伺服器負擔：每次只要處理小量資料請求，而不是整個頁面

AJAX 背後其實在做兩件事

1. 發送請求（跟伺服器要資料)
2. 等待並處理回應（拿到資料後更新畫面）

問題是：發送請求到收到回應，中間需要「等待時間」（網路傳輸、伺服器處理都要花時間，可能是 50ms，也可能是 2 秒）。
JavaScript 是「單執行緒」的語言，也就是同一時間只能做一件事。如果請求要花 2 秒，JavaScript 又是「傻傻等在那邊」，那使用者在這 2 秒內整個網頁會完全卡住、不能點任何東西。

所以才需要「非同步」（Asynchronous）處理方式——讓 JavaScript 先去發送請求，然後繼續做其他事情（讓使用者可以正常操作頁面），等到伺服器真的回應了，才回頭處理那個結果

網路請求

簡單來說，網路請求就是你的裝置（客戶端，如手機、電腦）向伺服器索取或傳送資料的過程。當你打開瀏覽器輸入網址並按下 Enter，或者在 App 裡點擊按鈕載入新動態時，背後都是在向遠端的伺服器發出網路請求，伺服器收到後再將結果回傳

request與response

• 請求 (Request)： 告訴伺服器你想做什麼。通常包含網址（目標位置）以及動作（Method）

• 回應 (Response)： 伺服器處理完你的請求後，把資料（如網頁畫面、圖片、JSON 數據）傳回給你的裝置，並附帶狀態碼（例如成功取得的 200，或找不到頁面的 404 Not Found)

• 在Javascript裡可以透過寫程式碼執行網路請求，就不用像瀏覽器那樣貼上網址按Enter

• 在 Network 分頁的 Headers、Status、Preview，可以看出一來一回的細節

開發者工具（DevTools）的 Network（網路)

Network面板是監控網頁與伺服器之間所有資料傳輸的核心工具。透過它，您可以查看每一次請求的詳細資訊，主要包含以下幾大重點：

1. 請求總覽（Requests Overview)

• Name：請求的檔案名稱或路徑
• Status：HTTP 狀態碼（如 200、404、500）
• Type：資源類型（xhr、fetch、document、script、stylesheet、img 等）
• Initiator：這個請求是被誰觸發的（哪支程式碼、哪個檔案）
• Size：傳輸大小（實際下載大小 vs. 未壓縮大小）
• Time：請求花費的時間
• Waterfall：時間軸視覺化，可看出請求的排隊、等待、下載各階段耗時

2. 點進單一請求後的詳細分頁

• Headers（標頭）
• Payload / Request
• Response
• Preview
• Timing
• Cookies

3. 篩選與工具功能

• Filter：可依類型（Fetch/XHR、JS、CSS、Img...）或關鍵字篩選請求
• Preserve log：跨頁面導航時保留請求紀錄（常用於除錯登入跳轉等情境）
• Disable cache：開發時強制不使用快取
• Throttling：模擬慢速網路（3G、4G），測試不同網速下的載入表現