通過 javascript 創建 xmlhttprequest 對象、設置請求、監聽響應就緒事件，即可在 html 中讀取文本文件。在實戰案例中，創建文本文件、添加 html 代碼，就能將文本文件內容輸出到頁面指定元素中。

在 HTML 中讀取文本文件的簡單指南

引言:
在 HTML 中讀取文本文件對于顯示網頁內容或與外部數據交互至關重要。本文將提供一個逐步指南，介紹如何用 JavaScript 輕松讀取文本文件。

代碼塊:

// 創建一個 XMLHttpRequest 對象
const xhr = new XMLHttpRequest();

// 打開一個 GET 請求
xhr.open('GET', 'path/to/textfile.txt', true);

// 設置請求類型
xhr.setRequestHeader('Content-Type', 'text/plain');

// 監聽響應就緒事件
xhr.onload = function() {
  // 檢查請求狀態
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 獲得文本文件內容
    const text = xhr.responseText;
    
    // 將文本文件內容輸出到頁面
    document.getElementById('result').innerHTML = text;
  }
};

// 發送請求
xhr.send();

實戰案例:

假設我們有一個名為 的文本文件，其中包含以下文本：“Hello World!”?，F在，我們想將此文本顯示到具有 HTML 元素 ID 為 的網頁中。

步驟:

<div id="result"></div>
<script>
  // 執行讀取文本文件的代碼塊
</script>

在瀏覽器中打開該 HTML 頁面，文本“Hello World!”會顯示在 元素中。

:

本指南展示了如何使用 JavaScript 輕松讀取 HTML 中的文本文件。通過遵循這些步驟和示例，你可以輕松地將外部數據加載到你的網頁中。