在本文中，我們將學(xué)習(xí)和使用各種 JavaScript 函數(shù)，這些函數(shù)可用于將數(shù)據(jù)從 URL 加載到我們的網(wǎng)頁，并相應(yīng)地對該數(shù)據(jù)執(zhí)行進(jìn)一步的操作。

在 JavaScript 中從 URL 獲取數(shù)據(jù)

JavaScript 中有多個內(nèi)置和外部函數(shù)可以使用 URL 加載數(shù)據(jù)。該 URL 為在服務(wù)器端創(chuàng)建的函數(shù)調(diào)用 API 請求，并返回數(shù)據(jù)以響應(yīng)請求。

我們可以使用不同的方法類型發(fā)送請求，但在本文中，我們將討論 GET 方法，該方法主要用于從服務(wù)器端獲取數(shù)據(jù)到客戶端。有多種方法可以在下面列出的 JavaScript 中發(fā)出 GET 請求。

• Fetch 方法
• XML Http 請求

fetch() 方法

fetch() 方法是一種在 JavaScript 中發(fā)出網(wǎng)絡(luò)請求的高級方法，最新的瀏覽器支持它。我們可以使用 fetch() 方法通過向服務(wù)器發(fā)送請求而不刷新網(wǎng)頁來從服務(wù)器加載數(shù)據(jù)。

我們可以使用帶有 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 函數(shù) funcRequest()，它將獲取 URL 作為參數(shù)，并使用帶有 await 關(guān)鍵字的 fetch 方法和定義的回調(diào)函數(shù) then() 并將響應(yīng)轉(zhuǎn)換為 JSON 數(shù)據(jù)。

如果發(fā)生任何錯誤，我們已將 catch 方法與 console.log() 一起使用，以便它將在日志中顯示錯誤。最后，我們保存 URL 并將其傳遞給 funcRequest(url);。

XML HTTP 請求

它是一種對象形式的 API，用于在 Web 瀏覽器和 Web 服務(wù)器之間傳輸數(shù)據(jù)。XMLHttpRequest 主要用于 AJAX（異步 JavaScript 和 XML）編程。

它不是一種編程語言，但 AJAX 是一組 Web 開發(fā)技術(shù)，它使用多種 Web 技術(shù)在客戶端開發(fā)異步 Web 應(yīng)用程序。

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 源代碼中，我們創(chuàng)建了 XMLHttpRequest 對象，然后我們定義了在加載請求期間的回調(diào)函數(shù)。我們使用了 open 函數(shù)，將請求方法類型和 URL 作為參數(shù)傳遞，并調(diào)用 XMLHttpRequest() 的 send() 方法。

到此這篇關(guān)于在 JavaScript 中從 URL 獲取數(shù)據(jù)的文章就介紹到這了,更多相關(guān)js從url獲取數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論