实例讲解使用原生JavaScript处理AJAX请求的方法

处理AJAX请求是现代Web开发中非常重要的一部分，可以轻松地从服务器加载数据并进行无需刷新页面的动态更新。原生JavaScript提供了一些内置的方法，可用于处理AJAX请求，并通过JavaScript代码与其他服务端技术交互。

以下是使用原生JavaScript处理AJAX请求的方法的完整攻略：

步骤一：创建XMLHttpRequest对象

XMLHttpRequest对象用于向服务器发送请求并接收响应。您可以使用以下代码创建XMLHttpRequest对象：

let xhr = new XMLHttpRequest();

步骤二：创建请求

一旦您创建了XMLHttpRequest对象，您可以使用以下方法创建一个请求：

xhr.open('GET', 'example.php', true);

此代码在XMLHttpRequest对象上调用open()方法，该方法具有三个参数：

• HTTP请求的类型，例如GET或POST
• 要加载的文件的URL
• 异步标志：如果值为true，则开启异步请求

步骤三：发送请求

发送请求是通过调用XMLHttpRequest对象上的send()方法实现的：

xhr.send();

步骤四：处理响应

您可以使用以下代码监听响应返回：

xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};

这段代码监听XMLHttpRequest对象的状态，并检查它是否已经成功返回数据。如果是，则响应将作为responseText属性返回。

示例一：使用AJAX请求从服务器获取数据并显示在页面上

const button = document.querySelector('button');
const output = document.querySelector('div');

button.addEventListener('click', function() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
    xhr.onload = function() {
        if(xhr.status === 200) {
            output.textContent = xhr.responseText;
        }
    };
    xhr.send();
});

在这个示例中，我们在单击按钮时创建了XMLHttpRequest对象，并通过调用open()方法来指定URL。一旦成功加载数据，我们使用responseText属性将响应显示在页面上。

示例二：AJAX请求通过POST方式将数据从表单提交到服务器

const form = document.querySelector('form');
const output = document.querySelector('div');

form.addEventListener('submit', function(event) {
    event.preventDefault();
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'submit.php', true);
    xhr.onload = function() {
        if(xhr.status === 200) {
            output.textContent = xhr.responseText;
        }
    };
    xhr.send(new FormData(form));
});

这个示例相当于用户提交表单时，我们将通过AJAX将表单数据发送到submit.php页面。我们在通过调用XMLHttpRequest对象的open()方法时，将HTTP请求类型指定为“POST”，然后使用FormData对象将表单数据发送到服务器。一旦成功提交表单并返回数据，我们将响应显示在页面上。

这些是使用原生JavaScript处理AJAX请求的基础。尽管这些代码可能有点冗长，但它们为您提供了对AJAX请求发生了什么的完整控制。