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

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

person TheGambler    schedule 07.12.2008    source источник
comment
Вам нужно будет предоставить более подробную информацию, чтобы люди могли помочь вам в дальнейшем. Каково именно содержание ответа? Как выглядит html, с которого вы начинаете? Каково состояние DOM, когда вы получаете запрос?   -  person rz.    schedule 08.12.2008


Ответы (5)


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

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

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

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

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

person rz.    schedule 07.12.2008

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

person Community    schedule 08.12.2008

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

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

<tbody>{responseText}</tbody>

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

person olliej    schedule 07.12.2008

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

person Chris    schedule 08.12.2008