显示获取响应 JavaScript

在 JavaScript 中，我们常常需要获取服务器的响应并将其展示给用户。这个过程可能涉及到网络请求和响应的处理。本文将介绍如何在 JavaScript 中获取服务器响应并将其显示在页面上。

发送网络请求

要获取服务器的响应，我们需要先发送一个网络请求到服务器。在 JavaScript 中，我们可以使用 XMLHttpRequest 对象来发送 HTTP 请求。以下是一个示例：

let xhr = new XMLHttpRequest();
xhr.open('GET', '/data.json', true);
xhr.onload = function() {
    // 处理响应
}
xhr.send();

这个示例发送了一个 GET 请求到 /data.json 接口。当服务器返回数据时，onload 回调函数会被调用。

处理响应

在 onload 回调函数中，我们可以处理服务器返回的响应。以下是一个简单的示例：

let xhr = new XMLHttpRequest();
xhr.open('GET', '/data.json', true);
xhr.onload = function() {
    let response = JSON.parse(xhr.responseText);
    document.getElementById('result').innerHTML = response.data;
}
xhr.send();

这个示例将服务器返回的数据解析为 JSON 格式，并将其中的 data 字段显示在 id 为 result 的元素中。

错误处理

当发送网络请求时，可能会发生错误。在 JavaScript 中，我们可以通过监听 onerror 回调函数来处理这些错误：

let xhr = new XMLHttpRequest();
xhr.open('GET', '/data.json', true);
xhr.onload = function() {
    let response = JSON.parse(xhr.responseText);
    document.getElementById('result').innerHTML = response.data;
}
xhr.onerror = function() {
    document.getElementById('error').innerHTML = '网络请求失败';
}
xhr.send();

这个示例在发送网络请求时添加了一个 onerror 回调函数，用于处理网络请求失败的情况。当发生错误时，id 为 error 的元素会显示出错误信息。

总结

在 JavaScript 中，我们可以使用 XMLHttpRequest 对象发送网络请求并处理服务器返回的响应。通过添加 onload 和 onerror 回调函数，我们可以更好地处理响应和错误。