在 Web 应用程序开发中，经常需要从服务器获取数据，然后在客户端进行展示。JavaScript 是现代 Web 开发中最流行的语言之一，在客户端上使用 JavaScript 请求服务器并等待响应是一种常见操作。本文将介绍如何使用 JavaScript 发送 HTTP 请求，并等待服务器响应。
JavaScript 中使用 XMLHttpRequest 对象来发送 HTTP 请求。XMLHttpRequest 对象是现代 Web 应用程序中最常用的异步数据交换技术。它允许我们从 JavaScript 中创建异步请求并与服务器进行交互。以下是一个简单的示例：
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8080/data');
xhr.send();上面的代码使用 GET 方法从 http://localhost:8080/data 端点请求数据。当调用 send() 方法时，请求将被发送到服务器。该方法是异步的，因此不会阻止后续代码的执行。
在发送请求后，我们需要等待服务器响应。我们可以使用监听器来处理响应。以下是一个简单的示例：
const xhr = new XMLHttpRequest();
xhr.onload = function() {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.error('Error occurred');
}
};
xhr.open('GET', 'http://localhost:8080/data');
xhr.send();上面的代码将请求发送到服务器，并在服务器响应时处理该响应。load 事件监听器在应用程序接收到响应时触发。如果响应状态为 200，则将响应输出到控制台。否则，将输出错误信息。
以上示例使用回调函数来处理服务器响应。但是，回调函数可能会导致嵌套和混乱的代码，因此我们可以使用 Promise 来处理异步请求。以下是一个使用 Promise 处理异步请求的示例：
function makeRequest(method, url) {
return new Promise(function(resolve, reject) {
const xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onload = function() {
if (xhr.status === 200) {
resolve(xhr.response);
} else {
reject(xhr.statusText);
}
};
xhr.onerror = function() {
reject(xhr.statusText);
};
xhr.send();
});
}以上代码中，makeRequest 函数接受 HTTP 方法和 URL 作为参数，并返回一个 Promise 对象。该对象具有两个处理器函数：resolve 和 reject。当服务器响应成功时，resolve 处理器函数将响应输出到控制台。而出现错误时，reject 处理器函数将输出错误信息。
以下是如何使用该函数：
makeRequest('GET', 'http://localhost:8080/data')
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.error(error);
});上面的代码将发出 HTTP GET 请求，并在处理成功或失败时调用处理器函数。使用 Promise 风格编写异步代码比使用回调函数更容易理解和维护。
结论
使用 JavaScript 发送 HTTP 请求和等待服务器响应是 Web 应用程序中的必备技能。JavaScript 提供了 XMLHttpRequest 对象来处理这种操作，并没有限制开发人员使用第三方库来简化代码。本文介绍了使用原生 JavaScript 发送 HTTP 请求和等待服务器响应的示例，并展示了如何使用 Promise 风格编写异步代码。
以上是javascript请求服务器并等待响应的详细内容。更多信息请关注PHP中文网其他相关文章！
