在 JavaScript 中從 URL 獲取資料
在本文中,我們將學習和使用各種 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()
方法。