AJAX XHR-请求 - 程序员自由职业

在使用 AJAX 中的 XMLHttpRequest（XHR）对象时，我们可以通过设置不同的参数和调用不同的方法来执行不同类型的请求。以下是一些常见的 AJAX XHR 请求的示例：

发送 GET 请求：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data', true);

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            // 在这里处理响应
            console.log(xhr.responseText);
        } else {
            // 处理错误
            console.error('Request failed with status:', xhr.status);
        }
    }
};

xhr.send();

发送 POST 请求：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/submit', true);

// 设置请求头，通知服务器发送的数据类型是 JSON
xhr.setRequestHeader('Content-Type', 'application/json');

// 准备要发送的数据
var data = {
    username: 'john_doe',
    password: 'secret'
};

// 将数据转换为 JSON 字符串并发送
xhr.send(JSON.stringify(data));

发送 FormData（用于文件上传等场景）：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/upload', true);

// 准备要发送的数据
var formData = new FormData();
formData.append('file', document.getElementById('fileInput').files[0]);

// 发送 FormData
xhr.send(formData);

设置超时时间：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data', true);

// 设置超时时间为 5000 毫秒（5秒）
xhr.timeout = 5000;

// 设置超时回调函数
xhr.ontimeout = function() {
    console.error('Request timed out');
};

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            // 在这里处理响应
            console.log(xhr.responseText);
        } else {
            // 处理错误
            console.error('Request failed with status:', xhr.status);
        }
    }
};

xhr.send();

这些示例涵盖了一些常见的 AJAX 请求场景，包括 GET 请求、POST 请求以及使用 FormData 发送文件等。在实际应用中，你可能需要根据具体的需求设置更多的请求参数，例如请求头、认证信息等。

转载请注明出处：http://www.zyzy.cn/article/detail/4590/Ajax