如何仅使用 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中文网其他相关文章！