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