HTML - 从 javascript 中的 URL 位置读取 .txt 文件答案

【问题标题】：HTML - read .txt file from URL location in javascriptHTML - 从 javascript 中的 URL 位置读取 .txt 文件
【发布时间】：2015-05-03 21:09:16
【问题描述】：

我想读取一个 URL 位置的 .txt 文件，比如说从http://www.puzzlers.org/pub/wordlists/pocket.txt 并在我的页面上处理它的内容。

您能否指出一些关于如何在 javascript 中执行此操作的教程或一些基本代码？

我有一个基本的 HTML 代码，其中有一些表格，我想用给定 URL 位置的 .txt 中的文本填充它们，但我不知道如何从该位置读取数据。

<html>
<head>
  <title>Pseudoganglia Interface</title>
  <!-- CSS goes in the document HEAD or added to your external stylesheet -->
  <style type="text/css">
  table.gridtable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
  }
  table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
  }
  table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
  }
  </style>
  <!-- Table goes in the document BODY -->
  <script>
    function getText()
    {
     // read text from URL location
    }
    function populateTables() {
      var tableHP = document.getElementById("tHP");
      // Create an empty <tr> element and add it to the 1st position of the table:
      var row = tableHP.insertRow(tableHP.rows.length);
      // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);

      // Add some text to the new cells:
      cell1.innerHTML = "NEW CELL1";
      cell2.innerHTML = "NEW CELL2";
    }
  </script>
</head>
<body onload="populateTables()">
<table class="gridtable" id="tHP">
  <tr>
<th colspan=2>HP</th>
  </tr>
  <tr>
<td># SN</td>
<td>% of used RAM</td> 
  </tr>
</table>

<br>

<table class="gridtable" id="tIBM">
  <tr>
<th colspan=2>IBM</th>
  </tr>
  <tr>
<td># CN</td>
<td>% of used RAM</td> 
  </tr>
</table>
</body>
</html>

【问题讨论】：

你能控制这个文本文件所在的位置吗？
您要查找的搜索词是 Ajax。这个世界不需要另一个 Ajax 教程（所以投票结束太宽泛了）。
一点也不宽泛，只是重复：stackoverflow.com/questions/15547407/…
@CyberDude — 它看起来不像那个副本，因为问题已经找到 XHR 对象并尝试使用它。
可能不是100%，类似的问题还有很多，我随便挑了一个。

标签： javascript html

【解决方案1】：

此代码可能对您有所帮助：

function getText(){
    // read text from URL location
    var request = new XMLHttpRequest();
    request.open('GET', 'http://www.puzzlers.org/pub/wordlists/pocket.txt', true);
    request.send(null);
    request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
            var type = request.getResponseHeader('Content-Type');
            if (type.indexOf("text") !== 1) {
                return request.responseText;
            }
        }
    }
}
function populateTables(){
    
    var outer_text = getText();
    outer_text = outer_text.split('\n');    // you can adjust the manner of parsing the received file (regexp)
    
    var tableHP = document.getElementById("tHP");
// Create an empty <tr> element and add it to the 1st position of the table:
    var row = tableHP.insertRow(tableHP.rows.length);
// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);

// Add some text to the new cells:
    cell1.innerHTML = outer_text[0];
    cell2.innerHTML = outer_text[1];
}

【讨论】：

我遇到了和上面一样的问题。对于request.readyState，我得到4 的值，对于request.status，我得到0 的值。你知道这可能是什么原因吗？我应该如何解决？
对于var type = request.getResponseHeader('Content-Type');，我得到null。
可能您没有权限从其他域请求资源（ES 同源策略）。在“那个”域上，应设置以下标头： header('Access-Control-Allow-Origin: *');
我现在意识到这是一个老问题，但它对我很有帮助，所以我将添加我的观察，看看为什么有些人可能会遇到问题。对 request.open 的调用包括用于异步的 true，但调用 getText() 函数时假设结果将立即出现。就我而言，我使用 request.responseText 调用了一个单独的函数，而不是返回它。也许将 false 传递给 request.open() 可能会阻塞，直到它被加载。这可能是一个替代解决方案。

【解决方案2】：

来自 codegrepper 使用 fetch（IE 上不支持）。

const url = "http://www.puzzlers.org/pub/wordlists/pocket.txt"
fetch(url)
   .then( r => r.text() )
   .then( t => //process your text! )

【讨论】：

清洁并完成工作
更多信息：w3schools.com/js/js_api_fetch.asp developer.mozilla.org/en-US/docs/Web/API/Fetch_API