小编分享js如何获取数据。

夏雨 • 2024年6月28日 09:33 • 网站搭建 • 阅读 1

使用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);
  });

小编分享js如何获取数据。

联系我们

QQ：951076433

小编分享js如何获取数据。

相关推荐

联系我们

QQ：951076433