如何僅使用 Vanilla JavaScript 進行 AJAX 呼叫？

在沒有jQuery 的情況下進行AJAX 呼叫：探索Vanilla JavaScript 方法

在沒有jQuery 的情況下進行AJAX 呼叫jQuery 的開發人員常見的要求非同步通訊的強大功能，無需依賴大量的第三方程式庫。以下詳細探討如何使用純 JavaScript 實現此目的：

Vanilla JavaScript XHR 物件

XMLHttpRequest (XHR) 物件是 vanilla JavaScript 中 AJAX 呼叫的基石。首先，使用 new XMLHttpRequest() 建構子實例化 XHR 物件。

事件處理與回呼函數

接下來，定義一個監視 XHR 物件狀態的事件偵聽器（就緒狀態）。當狀態轉換到 XMLHttpRequest.DONE（通常為 4）時，表示請求已完成。

HTTP 請求和回應處理

open() 方法初始化一個HTTP 請求，指定請求方法（例如GET、POST）、目標URL 以及請求是否應該非同步（設定為true ）阿賈克斯）。 send() 方法發送請求。

收到回應後，評估 XHR 物件的狀態屬性。狀態代碼 200 表示請求成功，而其他代碼（例如 400 或 500）表示錯誤。相應地處理這些場景。

示例代碼

以下代碼片段演示瞭如何使用普通JavaScript 創建和處理AJAX 調用：

function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) { // XMLHttpRequest.DONE == 4
           if (xmlhttp.status == 200) {
               document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
           }
           else if (xmlhttp.status == 400) {
              alert('There was an error 400');
           }
           else {
               alert('something else other than 200 was returned');
           }
        }
    };

    xmlhttp.open("GET", "ajax_info.txt", true);
    xmlhttp.send();
}

結論

了解如何製作不使用jQuery 的AJAX呼叫可以擴展您作為開發人員的工具包。透過利用普通 JavaScript XHR 對象，您可以完全控制非同步通訊流程，從而在 Web 應用程式中實現靈活且高效的資料傳輸。

以上是如何僅使用 Vanilla JavaScript 進行 AJAX 呼叫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！