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

HTML-从javascript中的URL位置读取.txt文件,javascript,html,Javascript,Html,我想从一个URL位置读取一个.txt文件,比如从我的页面上读取并处理它的内容 你能给我指出一些关于如何在javascript中实现这一点的教程或基本代码吗 我有一个基本的HTML代码,其中有一些表,我想用来自给定URL位置的.txt文本填充它们,但我不知道如何从该位置读取数据 <html> <head> <title>Pseudoganglia Interface</title> <!-- CSS goes in the docume

我想从一个URL位置读取一个.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>

假性神经节界面
表格{
字体系列:verdana、arial、无衬线字体;
字体大小:11px;
颜色:#333333;
边框宽度:1px;
边框颜色:#666666;
边界塌陷:塌陷;
}
table.gridtable th{
边框宽度:1px;
填充:8px;
边框样式:实心;
边框颜色:#666666;
背景色:#dedede;
}
table.gridtable td{
边框宽度:1px;
填充:8px;
边框样式:实心;
边框颜色:#666666;
背景色:#ffffff;
}
函数getText()
{
//从URL位置读取文本
}
函数populateTables(){
var tableHP=document.getElementById(“tHP”);
//创建一个空元素并将其添加到表的第一个位置:
var row=tableHP.insertRow(tableHP.rows.length);
//在“新”元素的第一和第二位置插入新单元格(元素):
var cell1=行插入单元格(0);
var cell2=行插入单元格(1);
//在新单元格中添加一些文本:
cell1.innerHTML=“新建cell1”;
cell2.innerHTML=“新建cell2”;
}
惠普
#锡
%用过的RAM

国际商用机器公司 #CN %用过的RAM
此代码可能会帮助您:

函数getText(){ //从URL位置读取文本 var request=new XMLHttpRequest(); request.open('GET','http://www.puzzlers.org/pub/wordlists/pocket.txt",对),; 请求发送(空); request.onreadystatechange=函数(){ if(request.readyState==4&&request.status==200){ var type=request.getResponseHeader('Content-type'); if(type.indexOf(“text”)!=1){ 返回request.responseText; } } } } 函数populateTables(){ var outer_text=getText(); outer_text=outer_text.split('\n');//您可以调整解析接收文件(regexp)的方式 var tableHP=document.getElementById(“tHP”); //创建一个空元素并将其添加到表的第一个位置: var row=tableHP.insertRow(tableHP.rows.length); //在“新”元素的第一和第二位置插入新单元格(元素): var cell1=行插入单元格(0); var cell2=行插入单元格(1); //在新单元格中添加一些文本: cell1.innerHTML=外部文本[0]; cell2.innerHTML=外部文本[1]; }来自使用fetch(IE不支持)

consturl=”http://www.puzzlers.org/pub/wordlists/pocket.txt"
获取(url)
.然后(r=>r.text())
。然后(t=>//处理文本!)

您可以控制包含此文本文件的位置吗?您要查找的搜索词是Ajax。这个世界不需要另一个Ajax教程(所以投票决定是否太宽)。它一点也不太宽,只是重复:@CyberDude-它看起来不像是那个教程的副本,因为问题已经找到了XHR对象并试图使用它。可能不是100%,有很多类似的问题,我刚选了一个。我的问题和上面一样。对于
request.readyState
我得到
4
的值,对于
request.status
我得到
0
的值。您知道这可能是什么原因吗?我应该如何修复它?对于
var type=request.getResponseHeader('Content-type')
我得到
null
。可能您没有权限从另一个域请求资源(ES同源策略)。在“该”域上,应设置以下标头:标头('Access-Control-Allow-Origin:');我现在意识到这是一个老问题,但它对我很有帮助,所以我会补充我的观察,为什么有些人可能会有问题。对request.open的调用包括异步的
true
,但是调用getText()函数时假设结果将立即出现。在我的例子中,我使用request.responseText调用了一个单独的函数,而不是返回它。可能将false传递给request.open()可能会阻塞,直到加载为止。这可能是另一种解决办法。