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><htmllang="zh-HK"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>AJAX 範例</title><script>functionloadData(){constxhr=newXMLHttpRequest();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><buttononclick="loadData()">載入數據</button><divid="result">呢度會顯示數據內容。</div></body></html>

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

優點

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

缺點

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

出面網頁