JavaScript 程式札記 : AJAX

什麼是 AJAX

當你在網路上購物或查詢資料時，有時候會發現網頁的某部分內容會自動更新，而不需要重新整理整個頁面，這背後的技術就叫做 AJAX。AJAX 是 "Asynchronous JavaScript and XML" ，意思是使用 JavaScript 以非同步的方式和伺服器交換資料。

AJAX 是如何運作的？

假如你正在使用一個天氣預報的網站，當你選擇一個城市時，該城市的天氣資訊會立即顯示出來，不需要重新加載整個頁面，這就是 AJAX 的效果，以下是 AJAX 運作的基本步驟：

1. 使用者進行某些操作，例如點擊按鈕。
2. JavaScript 會創建一個請求，要求伺服器提供某些資料。
3. 伺服器接收到請求後，處理並回傳資料。
4. JavaScript 接收到資料後，會更新網頁的特定部分。

AJAX 實作範例

要實現 AJAX，我們通常會使用 JavaScript 提供的 XMLHttpRequest 物件。以下是一個簡單的範例，展示如何使用 AJAX 從伺服器獲取數據：

// 創建 XMLHttpRequest 物件
var xhttp = new XMLHttpRequest();

// 設定當請求完成時的回調函數
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        // 請求成功，將伺服器回傳的數據顯示在網頁上
        document.getElementById("demo").innerHTML = this.responseText;
    }
};

// 開啟一個 GET 請求
xhttp.open("GET", "example.txt", true);

// 發送請求
xhttp.send();

在這個範例程式中，先創建了一個 XMLHttpRequest 物件，接著設定一個回調函數，這個函數會在請求的狀態改變時被調用，當請求成功完成時，將伺服器回傳的資料顯示在網頁上。

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡