AJAX

AJAX（Asynchronous JavaScript and XM，非同步JavaScript與XML技術）係一種用嚟建立互動式網頁應用嘅技術。佢嘅特色係，可以喺用戶操作時，唔需要重新載入成個網頁，就可以更新頁面嘅部分內容，令網頁應用嘅響應更加快速同流暢。

原理

AJAX 主要係透過瀏覽器內置嘅 XMLHttpRequest（XHR）對象，或者 Fetch API，發送同伺服器之間嘅異步請求。咁樣，網頁就可以喺後台同伺服器交換數據，而唔需要重新加載頁面。以下係 AJAX 嘅基本工作流程：

用戶喺網頁上觸發一個事件（例如撳掣或者改變輸入框內容）。
JavaScript 創建一個 XMLHttpRequest 或者用 Fetch API 發送請求俾伺服器。
伺服器處理請求，然後返回數據（可以係 JSON、XML、HTML，甚至係純文本）。
JavaScript 收到伺服器返回嘅數據，然後即時更新頁面嘅內容，而唔需要刷新整個頁面。

特點

異步性：AJAX 唔會阻塞用戶操作，請求發出後，其他操作可以繼續進行。
提升用戶體驗：用戶無需等成頁重新加載，從而提升操作流暢度。
數據格式多樣性：伺服器返嚟嘅數據可以係 JSON（最常用）、XML、HTML 或者文本。

應用範例

以下係一個簡單嘅 AJAX 例子，用嚟從伺服器獲取數據並顯示喺網頁上：

<!DOCTYPE html>
<html lang="zh-HK">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AJAX 範例</title>
  <script>
    function loadData() {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', 'data.txt', true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          document.getElementById('result').innerHTML = xhr.responseText;
        }
      };
      xhr.send();
    }
  </script>
</head>
<body>
  <h1>AJAX 範例</h1>
  <button onclick="loadData()">載入數據</button>
  <div id="result">呢度會顯示數據內容。</div>
</body>
</html>

喺呢個例子入面，用戶撳掣之後，網頁會向伺服器請求 data.txt 嘅內容，並將內容顯示喺網頁上。

優點

減少網絡流量：淨係請求所需數據。
提高用戶體驗：唔需要整頁刷新。
支援多數據格式：例如 JSON 或 XML。

缺點

SEO 問題：因為部分內容係動態加載，搜索引擎可能爬唔到。
瀏覽器兼容性：早期瀏覽器對 AJAX 兼容性唔高，但現時大部分現代瀏覽器都支持。
安全風險：AJAX 請求可能會帶嚟安全問題，例如跨站請求偽造（CSRF）或跨站腳本攻擊（XSS）。

出面網頁