在使用 AJAX 的 XMLHttpRequest（XHR）对象时，我们通常需要处理服务器响应。以下是如何处理 XHR 响应的示例：

处理文本响应：
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();

在这个例子中，xhr.responseText 包含了从服务器返回的文本响应。

处理 JSON 响应：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data', true);

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            // 解析 JSON 响应
            var jsonResponse = JSON.parse(xhr.responseText);
            console.log(jsonResponse);
        } else {
            // 处理错误
            console.error('Request failed with status:', xhr.status);
        }
    }
};

xhr.send();

在这个例子中，xhr.responseText 包含了从服务器返回的 JSON 格式的响应。我们使用 JSON.parse 将其解析为 JavaScript 对象。

处理二进制响应：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/image', true);
xhr.responseType = 'arraybuffer';

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            // 处理二进制响应
            var byteArray = new Uint8Array(xhr.response);
            console.log(byteArray);
        } else {
            // 处理错误
            console.error('Request failed with status:', xhr.status);
        }
    }
};

xhr.send();

在这个例子中，我们通过设置 xhr.responseType 为 'arraybuffer' 来处理二进制响应。xhr.response 包含了从服务器返回的二进制数据，我们将其转换为 Uint8Array。

这些示例展示了不同类型的响应处理方式。在实际应用中，你可能需要根据服务器返回的数据类型选择适当的处理方法。


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