迹忆客 专注技术分享

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

在 JavaScript 中从 URL 获取数据

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

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

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() 方法。