使用JavaScript可以通过AJAX、Fetch API、XMLHttpRequest等方式从服务器获取数据，或者通过读取本地文件、操作DOM元素等方式获取数据。
（图片来源网络，侵删）
JavaScript 是一种广泛用于网页开发的脚本语言，它提供了许多方法来获取数据，在本文中，我们将介绍如何使用 JavaScript 从不同的来源获取数据，包括浏览器、服务器和第三方 API。
1、从浏览器获取数据
浏览器是 JavaScript 最常见的运行环境，我们可以使用各种方法从浏览器中获取数据，以下是一些常见的方法：
localStorage：localStorage 是一个 Web 存储 API，允许我们在浏览器中存储键值对，这些数据将在页面会话期间保持，即使刷新页面也不会丢失，要使用 localStorage，首先需要设置一个键值对，然后可以使用该键来检索数据。
// 设置一个键值对 localStorage.setItem(\'key\', \'value\'); // 检索数据 var data = localStorage.getItem(\'key\');
sessionStorage：sessionStorage 与 localStorage 类似，但它只在当前会话期间保持数据，当会话结束时（用户关闭浏览器），数据将自动清除，要使用 sessionStorage，同样需要设置一个键值对，然后可以使用该键来检索数据。
// 设置一个键值对 sessionStorage.setItem(\'key\', \'value\'); // 检索数据 var data = sessionStorage.getItem(\'key\');
cookies：cookies 是一种在客户端存储数据的简单方法，它们通常用于识别用户或跟踪用户行为，要设置一个 cookie，可以使用 document.cookie 属性，要检索 cookie，可以使用相同的属性。
// 设置一个 cookie document.cookie = \'key=value\'; // 检索 cookie var data = document.cookie;
2、从服务器获取数据
要从服务器获取数据，我们需要发送一个 HTTP 请求，JavaScript 提供了几种方法来实现这一点，包括 XMLHttpRequest、fetch 和 axios，以下是一些常见的方法：
（图片来源网络，侵删）
XMLHttpRequest：XMLHttpRequest 是一个内置的 JavaScript 对象，用于与服务器交互，要使用 XMLHttpRequest，首先需要创建一个实例，然后使用 open()、send() 和 responseText 等方法来发送请求和接收响应。
var xhr = new XMLHttpRequest();
xhr.open(\'GET\', \'https://api.example.com/data\', true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = xhr.responseText;
console.log(data);
}
};
fetch：fetch 是一个现代的 JavaScript API，用于发送 HTTP 请求并处理响应，要使用 fetch，只需调用其函数并传入 URL，然后使用 then() 和 catch() 方法来处理响应和错误。
fetch(\'https://api.example.com/data\')
.then(function (response) {
return response.text();
})
.then(function (data) {
console.log(data);
})
.catch(function (error) {
console.error(\'Error:\', error);
});
axios：axios 是一个流行的第三方库，用于发送 HTTP 请求并处理响应，要使用 axios，首先需要安装它（通过 npm install axios），然后在代码中导入它并使用其函数来发送请求和处理响应。
import axios from \'axios\';
axios.get(\'https://api.example.com/data\')
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.error(\'Error:\', error);
});
3、从第三方 API 获取数据
许多网站和服务提供商提供公共 API，允许我们访问他们的数据，要使用这些 API，我们需要遵循其文档中的指南来发送请求并处理响应，以下是一个使用第三方 API（OpenWeatherMap）的示例：
import axios from \'axios\';
const apiKey = \'your_api_key\'; // 替换为你的 API key
const city = \'New York\'; // 要查询的城市名称或 ID
axios.get(https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.error(\'Error:\', error);
});
相关问答FAQs：
Q1：如何在 JavaScript 中获取当前日期和时间？
（图片来源网络，侵删）
本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/453199.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
