将文件中的文本显示到html网页中

Question

I am completely new in html and javascripts. what i am trying to do is fairly simple i think. I have a file hosted on a server and i want to show the text in the file on the page. I am following the answer for this Question .

However the text doesn't show at all.

<section>
<pre id="contents"></pre>
<script>function populatePre(url) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function () {
        document.getElementById('contents').textContent = this.responseText;
    };
    xhr.open('GET', url);
    xhr.send();
}
 populatePre(${summary}); 
</script>
</section>

${summary} just contains the url for the text file

i've tried switching variable with the actual url no change

here's the url https://s3-us-west-1.amazonaws.com/mecturkaudiofiles/Order/20140707_tmm_pistorius_update_att.txt

I don't have to do it using javascript i just want to find a way that works

Ps I've also tried

 <?php
echo file_get_contents("https://s3-us-west-1.amazonaws.com/mecturkaudiofiles/Order/20140707_tmm_pistorius_update_att.txt");
?>

this is what i get as an output

Answer 1

Add this before you .open() :

xhr.addEventListener('readystatechange', function(){
    if(xhr.readyState === 4 && xhr.status !== 0) {
    console.log(xhr.response)
};

and remove the whole xhr.onLoad line

EDIT: to populate the contents, instead of my console.log, use your:

document.getElementById('contents').textContent = xhr.response;