如何使用JavaScript从服务器获取数据

JavaScript 在前端开发中扮演着至关重要的角色，其与服务器进行数据交互的能力使得网页能够动态更新，提供更为丰富的用户体验。以下是详细介绍 JavaScript 如何获取服务器数据的探讨。

使用 XMLHttpReqeust 对象

XMLHttpRequest(XHR)是传统获取服务器数据的方法。尽管现代开发中已经有更优秀的替代方案，但了解其原理仍然很有价值。

基本用法：

1. 创建一个 XMLHttpRequest 实例。

2. 设置响应的回调函数。

3. 打开一个请求。

4. 发送请求。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);


console.log(response);
}
};
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();

使用 Fetch API

Fetch API 是现代浏览器提供的一种原生方法，用于发起网络请求。它返回一个 Promise，更加简洁和易于使用。

基本用法：

fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Fetching error:', error);
});

使用 Axios

Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 node.js 中。它提供了更为丰富的配置选项和拦截器功能，方便进行统一处理。

安装：

npm install axios

基本用法：

axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Axios error:', error);
});