使用Javascript将文件插入html页面？答案

【问题标题】：Inserting of file into an html page using Javascript?使用Javascript将文件插入html页面？
【发布时间】：2008-12-07 23:45:38
【问题描述】：

我目前正在尝试使用 DOM 和 Javascript 从文件中读取文本并将其附加到我的 html 页面中的元素。我无法让文本格式化。我试过使用 innerHtml 但根本没有格式化（没有换行符）。

这里是javascript：

http = new XMLHttpRequest();
http.open("GET",FILE,false);
http.send();       
document.getElementById("tbody").innerHTML = http.responseText

就像我说的那样，文本被添加到 tbody 元素中，但从未如此格式化。

我得到了它使用这个代码（带有 pre 标签），但就像我说它在我的电脑上工作但在服务器上没有帮助。

           http.open("GET",FILE ,false);
           http.send();
           var newtext = document.createTextNode(http.responseText);
           var para = document.getElementById("tbody");
           para.appendChild(newtext);

这是我所有的 javascript 代码：

函数 getHTTPObject() { var http = false;

/*@cc_on
    @if (@_jscript_version >= 5)
    try
    {
        http = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
        try
        {
            http = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (E)
        {
            http = false;
        }
    }
    @else
    {
        http = false;
    }
@end @*/

if (!http && typeof XMLHttpRequest != 'undefined')
{
    try
    {
        http = new XMLHttpRequest();
    }
    catch (e)
    {
        http = false;
    }
}
return http

}

    function loadData()
    {

     http = getHTTPObject();

        if (http)
        {
           http.open("GET","my file name",false);
           http.send();
           var newtext = document.createTextNode(http.responseText);
           var para = document.getElementById("tbody");
           para.appendChild(newtext);   
        }
    }

【问题讨论】：

您需要提供更多详细信息，以便人们进一步帮助您。响应的内容究竟是什么？您开始使用的 html 是什么样的？收到请求时 DOM 的状态是什么？

标签： javascript file

【解决方案1】：

您可能会幸运地将文本包装在<pre> 标记中。回应中的内容是什么？如果是 XML，您可能需要使用 responseXML。

http = new XMLHttpRequest();
http.open("GET",FILE,false);
http.send();       
document.getElementById("tbody").appendChild(http.responseXML);

【讨论】：

【解决方案2】：

这完全取决于响应中的数据类型。如果是纯文本，则没有理由对其进行格式化。如果您希望 html 像上面建议的那样“尊重”空格，请将文本放在 pre 标记内。

如果响应是 html，请确保 #tbody 是 div 或类似的东西。

您还应该考虑使用 jquery 之类的东西来进行 DOM 操作和 ajax。它会通过跨浏览器的兼容性为您省去头疼的问题，并且编写起来更好。

【讨论】：

【解决方案3】：

我敢打赌，答案与您的陈述有关：“它适用于我的 PC，但不适用于服务器”。我猜您遇到问题是因为服务器上不存在该文件，或者该文件的路径不同。您是否通过直接在浏览器中尝试文件的 URL 来检查文件是否已发送到您的客户端？

【讨论】：

【解决方案4】：

innerHTML 获取（并解析）和 html 字符串，因此应该得到一个类似于

的 DOM 树

（假设）

<tbody>{responseText}</tbody>

但如果不知道响应文本中的内容类型，就很难知道问题的确切原因。

【讨论】：

【解决方案5】：

它可以在您的 PC 上运行但不能在服务器上运行的原因可能是时间问题。 AJAX 是异步的，但您将其视为同步的。

【讨论】：