使用JavaScript函數實作AJAX請求和資料獲取

使用JavaScript函數實作AJAX請求和資料擷取

一、AJAX簡介
AJAX（Asynchronous JavaScript and XML）是一種用於在網頁上實現異步數據交互的技術。透過AJAX，我們可以在不刷新整個頁面的情況下向伺服器發送請求，並取得伺服器傳回的資料。這樣可以提升使用者體驗，使頁面更加互動和動態。

二、AJAX請求的實作步驟

1. 建立XMLHttpRequest物件。
2. 設定請求方式、URL、是否非同步等。
3. 註冊回呼函數以處理伺服器傳回的資料。
4. 發送請求。
5. 處理伺服器傳回的資料。

三、使用JavaScript函數實作AJAX請求的程式碼範例

1. #建立XMLHttpRequest物件

   function createHttpRequest() {
     if (window.XMLHttpRequest) {
    // 支持现代浏览器
    return new XMLHttpRequest();
     } else if (window.ActiveXObject) {
    // 兼容IE6及更早版本
    return new ActiveXObject("Microsoft.XMLHTTP");
     } else {
    alert("浏览器不支持AJAX！");
    return null;
     }
   }

   登入後複製

2. #傳送GET請求並取得資料

   function getData(url, callback) {
     var xhr = createHttpRequest();
     if (xhr) {
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        callback(xhr.responseText);
      }
    };
    xhr.send();
     }
   }

   登入後複製

3. 發送POST請求並取得資料

   function postData(url, data, callback) {
     var xhr = createHttpRequest();
     if (xhr) {
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        callback(xhr.responseText);
      }
    };
    xhr.send(data);
     }
   }

   登入後複製

四、使用範例

假設我們有一個後端API接口，可以傳回一段JSON格式的資料。使用上述程式碼可以進行AJAX請求並取得資料。

1. 使用GET請求取得資料

   var url = "http://example.com/api/getData";
   getData(url, function(response) {
     // 在这里处理获取到的数据
     console.log(response);
   });

   登入後複製

2. #使用POST請求傳送資料並取得傳回結果

   var url = "http://example.com/api/submitData";
   var data = "username=John&password=123456";
   postData(url, data, function(response) {
     // 在这里处理返回的结果
     console.log(response);
   });

   登入後複製

總結：
使用JavaScript函數實作AJAX請求和資料取得可以讓網頁更加動態和互動式。透過建立XMLHttpRequest對象，設定請求方式和URL，發送請求並處理伺服器返回的數據，我們可以實現非同步資料互動的功能。透過GET請求獲取數據或使用POST請求發送數據，在回調函數中處理伺服器返回的結果，可以使網頁與伺服器進行數據交互，並動態展示數據。

以上是使用JavaScript函數實作AJAX請求和資料獲取的詳細內容。更多資訊請關注PHP中文網其他相關文章！