Question

根据其他文档，我已成功打印出一行分隔的文本文件。

<!DOCTYPE html>
<html>
<head>
<script>
function readFile()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }

     xmlhttp.onreadystatechange=function()
     {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
             document.getElementById("myDiv").innerHTML=xmlhttp.responseText.split("\n");
        }
     }

     xmlhttp.open("GET","OFCaddresses.txt",true);
     xmlhttp.send();
 }
 </script>
 </head>
 <body>

 <div id="myDiv"><h2>"FILE.txt"</h2></div>
 <button type="button" onclick="readFile()">FILE</button>

 </body>
 </html>

如果有人可以解释的话，我想更好地理解这是如何工作的。我理解他们如何定义xmlhttp取决于浏览器，但

是什么

document.getElementById("myDiv").innerHTML=xmlhttp.responseText.split("\n");

实际上呢？它是否会将myDiv的内容从文本更改为文件内容？ onreadystatechange与按钮有什么关系？

Answer 1

看来你需要更多地阅读javascript的功能及其运作方式。

xmlhttp.onreadystatechange=function()正在为xmlhttp对象分配一个函数，该函数将在readystate更改时执行。这意味着，当xmlhttp对象经历了请求数据的各个阶段时，它将多次执行此功能。

在该功能中，您需要检查：if (xmlhttp.readyState==4 && xmlhttp.status==200)

这就是说，如果状态为4（完成 - 请参阅here了解有关就绪状态的更多信息），然后继续执行{}块内的所有内容。

最后，你有这个代码

document.getElementById("myDiv").innerHTML=xmlhttp.responseText.split("\n");

这是使用保存页面上所有html的document对象。 getElementById方法在html对象中搜索具有给定id的项目。您已获得以下HTML

<div id="myDiv"><h2>"FILE.txt"</h2></div>

所以document.getElementById("myDiv")找到了这个div。 innerHTML属性返回该div的html，该div当前是您的<h2>标题。

xmlhttp.responseText.split("\n");从您的xmlhttp对象获取响应，并按新行将其拆分为数组，并将其设置为新值innerHTML对象。当用html打印数组时，它以逗号分隔。

希望这能让您更好地理解。但这些是非常基本的javascript命令，所以你有很多学习的东西。

Answer 2

document.getElementById("myDiv")

访问ID为myDiv的元素。

document.getElementById("myDiv").innerHTML

访问ID为myDiv

的元素的innerHTML

xmlhttp.responseText

获取xmlhttp响应的主体（而不是与响应一起发送的标头或其他信息）

xmlhttp.responseText.split("/n")

将响应拆分为数组，分隔符为换行符。

 document.getElementById("myDiv").innerHTML=xmlhttp.responseText.split("\n");

将带有id myDiv的元素内的所有内容替换为响应文本，将换行符更改为逗号（因为数组在被视为字符串时将使用逗号分隔数组值）。

注意：一个AJAX请求（这是整个xmlhttpRequest的全部内容）是异步的，也就是说，它将在您运行的代码的正常过程之外发生。因此，一旦收到回复，您需要一种方法来使用这些信息。 onreadystatechange是从服务器收到响应（成功或失败）时将解决的事件。这就是函数进一步试图找出readyState和status的原因：确保响应成功。如果您的互联网连接速度较慢或服务器距离很远，您会发现异步部分比在您自己的计算机上发生的情况更明显：可能需要一两秒才能解决。

解释document.getelementbyid.innerhtml如何打印文本

2 个答案: