在 JavaScript 中从 URL 获取数据

Muhammad Muzammil Hussain 2022年6月7日

JavaScript JavaScript Get

在本文中，我们将学习和使用各种 JavaScript 函数，这些函数可用于将数据从 URL 加载到我们的网页，并相应地对该数据执行进一步的操作。

在 JavaScript 中从 URL 获取数据

JavaScript 中有多个内置和外部函数可以使用 URL 加载数据。该 URL 为在服务器端创建的函数调用 API 请求，并返回数据以响应请求。

我们可以使用不同的方法类型发送请求，但在本文中，我们将讨论 GET 方法，该方法主要用于从服务器端获取数据到客户端。有多种方法可以在下面列出的 JavaScript 中发出 GET 请求。

Fetch 方法
XML Http 请求

`fetch()` 方法

fetch() 方法是一种在 JavaScript 中发出网络请求的高级方法，最新的浏览器支持它。我们可以使用 fetch() 方法通过向服务器发送请求而不刷新网页来从服务器加载数据。

我们可以使用带有 fetch 请求的 async await 方法来紧凑地做出承诺。在所有高级浏览器中，都支持 Async 功能。

基本语法：

let requestRsponse = fetch(url, [params])

<script>
async function funcRequest(url){
 await fetch(url)
    .then((response) => {
      return response.json(); // data into json
    })
    .then((data) => {
      // Here we can use the response Data
    }).
    .catch(function(error) {
      console.log(error);
    });
}
   const url = 'URL of file';
   funcRequest(url);

</script>

在上面的 JavaScript 源代码中，我们声明了 async await 函数 funcRequest()，它将获取 URL 作为参数，并使用带有 await 关键字的 fetch 方法和定义的回调函数 then() 并将响应转换为 JSON 数据。

如果发生任何错误，我们已将 catch 方法与 console.log() 一起使用，以便它将在日志中显示错误。最后，我们保存 URL 并将其传递给 funcRequest(url);。

XML HTTP 请求

它是一种对象形式的 API，用于在 Web 浏览器和 Web 服务器之间传输数据。XMLHttpRequest 主要用于 AJAX（异步 JavaScript 和 XML）编程。

它不是一种编程语言，但 AJAX 是一组 Web 开发技术，它使用多种 Web 技术在客户端开发异步 Web 应用程序。

GET 的基本语法：

<script>
my_variable = new XMLHttpRequest(); // object
my_variable.onload = function() {

 // Here, we can use the response Data

}
my_variable.open("GET", "MY_FILE_URL");

my_variable.send();

</script>

在上面的 JavaScript 源代码中，我们创建了 XMLHttpRequest 对象，然后我们定义了在加载请求期间的回调函数。我们使用了 open 函数，将请求方法类型和 URL 作为参数传递，并调用 XMLHttpRequest() 的 send() 方法。

在 JavaScript 中从 URL 获取数据

fetch() 方法

XML HTTP 请求

`fetch()` 方法