原生JS发送异步数据请求

下面是原生JS发送异步数据请求的完整攻略：

1. 创建XMLHttpRequest对象

XMLHttpRequest对象是用于向服务器发送请求和获取服务器响应的JavaScript API。我们需要先创建一个XMLHttpRequest对象来处理异步请求。

let xhr = new XMLHttpRequest();

2. 设置请求参数

向服务器发送请求需要明确两个关键信息：请求方法和请求URL。调用open()方法设置请求方式和请求的URL地址。如果是POST请求，则需要设置请求头的Content-Type。

let xhr = new XMLHttpRequest();

xhr.open('GET', 'https://example.com/api/data', true);
// 如果是POST请求，需要设置请求头
// xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');

3. 发送请求

发送异步请求时，调用send()方法将请求发送到服务器。

let xhr = new XMLHttpRequest();

xhr.open('GET', 'https://example.com/api/data', true);

xhr.send();

4. 处理响应

服务器响应完成后，可以使用onreadystatechange事件来监听响应状态变化。当响应状态码为200且响应头正确时，通过responseText获取响应正文。

let xhr = new XMLHttpRequest();

xhr.open('GET', 'https://example.com/api/data', true);

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

xhr.send();

示例说明

示例一：使用AJAX从后端获取数据

let xhr = new XMLHttpRequest();

xhr.open('GET', 'https://example.com/api/data', true);

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        let response = xhr.responseText;
        let data = JSON.parse(response);
        let list = document.createElement('ul');

        data.forEach(function(item) {
            let li = document.createElement('li');
            li.innerText = item.name;
            list.appendChild(li);
        });

        document.body.appendChild(list);
    }
};

xhr.send();

此示例中，我们从指定URL获取JSON数据，将其解析为JavaScript对象，并将对象内容显示在一个无序列表中。

示例二：使用AJAX向后端发送数据

let xhr = new XMLHttpRequest();
let requestBody = {
    name: '张三',
    age: 18,
    gender: 'male'
};

xhr.open('POST', 'https://example.com/api/user', true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');

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

xhr.send(JSON.stringify(requestBody));

此示例中，我们向指定URL发送了一个POST请求。在请求头中设置Content-Type为application/json，请求体使用JSON.stringify()方法将JavaScript对象序列化为JSON字符串。请求完成后，在控制台中输出响应正文。