Explaining how document.getelementbyid.innerhtml prints text

Question

Following other documentation, I have succesfully printed out a text file separated by line.

<!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>

I am trying to better understand how this works if someone could explain. I understand how they define xmlhttp depending on the browser, but what does

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

actually do? Does it change the content of myDiv from the text to the file content? What does onreadystatechange have to do with the button?

That shows the lines in your response as a comma separated string; is that what you actually wanted? — Ja͢ck, Jul 08 '14 at 02:04

score 2 · Answer 1 · edited May 23 '17 at 12:05

It appears you need to do a lot more reading on what javascript does and how it works.

xmlhttp.onreadystatechange=function() is assigning a function to the xmlhttp object that will get executed when the readystate changes. This means that as the xmlhttp object goes through it's various stages of requesting data, it will execute this function a number of times.

Within that function you have a check: if (xmlhttp.readyState==4 && xmlhttp.status==200)

This is saying if the readystate is 4 (complete - see here for more info on readystates) then continue to execute everything within the {} blocks.

Finally, you have this code

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

This is using the document object which holds all the html on the page. The getElementById method searches the html objects for an item with the given id. You've got the following html

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

so document.getElementById("myDiv") finds this div. The innerHTML property returns the html of that div, which is currently your <h2> header.

xmlhttp.responseText.split("\n"); gets the response from your xmlhttp object and splits it into an array by new lines and sets this as the new value innerHTML object. When an array is printed in html, it is comma-separated.

Hope this gives you a better understanding. But these are pretty basic javascript commands so you have a lot of learning to go.

score 0 · Answer 2 · answered Jul 08 '14 at 02:20

document.getElementById("myDiv")

access the element with ID myDiv.

document.getElementById("myDiv").innerHTML

access the innerHTML of element with ID myDiv

xmlhttp.responseText

get the body of the xmlhttp response (as opposed to the header or other information sent along with the response)

xmlhttp.responseText.split("/n")

split the response into an array, with the delimiter being the newline character.

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

Replace everything that is inside the element with id myDiv with the response text, changing newlines into commas (since the array, when treated as a string, will use commas to separate array values).

Note: an AJAX request (which is what the whole xmlhttpRequest is all about) is asynchronous, that is, it will happen outside the normal course of the code you are running. So, you need a way to use the information once you get a response back. onreadystatechange is an event that will resolve when a response is received from the server (success or failure). which is why the function further tries to figure out readyState and status: to ensure the response was successful. If you have a slow internet connection or the server is far away you'll notice the asynchronous part more obviously than when it's all happening on your own computer: it may take a second or two to resolve.

Explaining how document.getelementbyid.innerhtml prints text

2 Answers2