原生js完整ajax请求,分哪几步来实现?

五个步骤

第一步：创建 XMLHttpRequest对象

var ajax = new XMLHttpRequest()

第二步：规定请求的类型、URL 以及是否异步处理请求

ajax.open('GET',url,true)

第三步：发送信息至服务器时内容编码类型

ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded")

第四步：发送请求

ajax.send(null);

第五步：接受服务器响应数据

ajax.onreadystatechange = function () {if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)){}}

实现：

在原生JavaScript中实现完整的AJAX请求，通常涉及以下几个步骤：

1. 创建XMLHttpRequest对象

首先，你需要创建一个XMLHttpRequest对象。这是所有AJAX请求的基础。

var xhr = new XMLHttpRequest();

2. 配置请求

接下来，使用open方法配置请求。这个方法需要三个参数：请求类型（如GET或POST）、请求的URL，以及是否异步执行（通常是true）。

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

3. 设置请求头（可选）

如果需要设置请求头（例如，指定内容类型），可以在发送请求之前通过setRequestHeader方法设置。例如，当发送POST请求时，通常需要设置Content-Type为application/json。

xhr.setRequestHeader('Content-Type', 'application/json');

4. 发送请求

配置好请求后，使用send方法发送请求。对于GET请求，通常不需要传递任何参数到send方法；对于POST请求，你需要传递相应的数据。

// GET请求
xhr.send();
 
// POST请求，传递数据
xhr.send(JSON.stringify({ key: 'value' }));

5. 处理响应

在发送请求后，你需要在XMLHttpRequest对象上设置事件处理函数来处理响应。常用的有onreadystatechange和onload。

使用onreadystatechange事件处理函数：

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 请求成功，处理响应数据
        console.log(xhr.responseText); // 或者 xhr.responseJSON（如果设置了正确的Content-Type）
    } else if (xhr.readyState === 4) {
        // 请求失败，处理错误情况
        console.error('Request failed:', xhr.statusText);
    }
};

使用onload事件处理函数（更简洁）：

xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        // 请求成功，处理响应数据
        console.log(xhr.responseText); // 或者 xhr.responseJSON（如果设置了正确的Content-Type）
    } else {
        // 请求失败，处理错误情况
        console.error('Request failed:', xhr.statusText);
    }
};

6. 处理错误（可选）

为了提高健壮性，你也可以设置一个错误处理函数来捕获传输错误：

xhr.onerror = function() {
    console.error('Network error'); // 处理网络错误情况
};

完整示例代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(xhr.responseText); // 处理成功响应数据
        } else {
            console.error('Request failed:', xhr.statusText); // 处理失败情况
        }
    }
};
xhr.send(); // 发送请求

或者使用更简洁的onload:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) { // 检查HTTP响应状态码是否表示成功响应（2xx）
        console.log(xhr.responseText); // 处理成功响应数据
    } else { // 如果状态码表示其他类型的响应（如4xx或5xx）则处理错误情况。例如：404 Not Found 或 500 Internal Server Error。 你可以根据需要添加更详细的错误处理逻辑。 例如：console.error('Request failed:', xhr.statusText); 
　　　　// 处理失败情况。你也可以在这里添加更详细的错误信息。例如：console.error('Request failed with status:', xhr.status, 'message:', xhr.statusText); 
　　} 
}; 
xhr.onerror = function() { 
　　console.error('Network error'); // 处理网络错误情况 
}; 
xhr.send();