[Day 19] 何謂 AJAX

2024 iThome 鐵人賽

DAY 19

佛心分享-IT 人自學之術

讀書筆記&心得－看完這本就會懂！帶你無痛提升JavaScript面試力：精選55道前端工程師的核心問題 × 求職加分模擬試題解析系列第 19 篇

16th鐵人賽

yc1996

2024-08-21 07:54:36

262 瀏覽

分享至

前言
在現代網頁開發中，提升使用者體驗和優化資源使用是非常重要的課題。尤其當頁面上的某些區塊需要頻繁更新資料時，過去的做法可能會讓整個網頁重載，導致資源浪費和使用者體驗下降。這時候，學會如何只更新網頁中部分區塊的資料，而不影響整體頁面，就變得至關重要。

今天，我要和大家分享的是 AJAX 技術。假設在寫網頁時，你需要刷新畫面上的某個部分資料，而其他部分都是靜態資源，沒有必要更新。若整個網頁重整，不僅浪費時間，還會導致不必要的資源消耗。這時候，AJAX 就派上用場了。它可以僅針對特定區塊進行資料刷新，避免整頁重載，提升效能與使用者體驗。

<body>
    <h1>目前點單</h1>
    <div id="order">咖啡</div>
    <button id="addCake">加點蛋糕</button>

    <script>
        document.getElementById("addCake").addEventListener("click", function() {
            // 模擬一個 AJAX 請求
            const xhr = new XMLHttpRequest();
            xhr.open("GET", "https://example.com/add-cake", true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 假設伺服器返回 "蛋糕" 作為回應
                    document.getElementById("order").innerHTML += "、蛋糕";
                }
            };
            xhr.send();
        });
    </script>
</body>

從上述例子，我們只針對了以下程式碼片段做更新，其餘區塊仍保持不變