Вставка файла в HTML-страницу с помощью Javascript?

Question

В настоящее время я пытаюсь прочитать текст из файла и добавить его к элементу на моей html-странице, используя DOM и Javascript. Я не могу получить текст для форматирования, хотя. Я пытался использовать 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);   
        }
    }

Answer 1

Могу поспорить, что ответ связан с вашим утверждением: «Это работает на моем ПК, но не на сервере». Я предполагаю, что у вас есть проблемы, потому что файл не существует на сервере, или путь к файлу другой. Вы проверили, что файл отправлен вашему клиенту, попробовав URL-адрес файла в браузере напрямую?

Answer 2

Все зависит от того, какие данные есть в ответе. Если это простой текст, то нет причин его форматировать. Если вы хотите, чтобы html "уважал" пробелы, как предложено выше, поместите текст в предварительный тег.

Если ответ html, убедитесь, что #tbody - это div или что-то подобное.

Вам также следует использовать что-то вроде jquery для манипуляций с DOM и ajax. Это избавит вас от головной боли благодаря совместимости с разными браузерами, и писать лучше.

Answer 3

Возможно, вам повезет, заключив текст в тег <pre>. Что в ответе? Если это XML, вы можете использовать responseXML.

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

Answer 4

Причина, по которой он работает на вашем компьютере, но не на сервере, вероятно, связана с синхронизацией. AJAX асинхронный, но вы рассматриваете его как синхронный.

Answer 5

innerHTML принимает (и анализирует) и html-строку, так что в результате должно получиться дерево DOM, подобное

(при условии)

<tbody>{responseText}</tbody>

Но, не зная, какой тип контента содержится в тексте ответа, трудно определить точную причину вашей проблемы.