在 JavaScript 中從 URL 獲取資料

Muhammad Muzammil Hussain 2022年6月7日
在 JavaScript 中從 URL 獲取資料

在本文中,我們將學習和使用各種 JavaScript 函式,這些函式可用於將資料從 URL 載入到我們的網頁,並相應地對該資料執行進一步的操作。

在 JavaScript 中從 URL 獲取資料

JavaScript 中有多個內建和外部函式可以使用 URL 載入資料。該 URL 為在伺服器端建立的函式呼叫 API 請求,並返回資料以響應請求。

我們可以使用不同的方法型別傳送請求,但在本文中,我們將討論 GET 方法,該方法主要用於從伺服器端獲取資料到客戶端。有多種方法可以在下面列出的 JavaScript 中發出 GET 請求。

  1. Fetch 方法
  2. 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() 方法。