Can someone please explain the following code in javascript; it is used to read a text file, but I don't know about the XML and AJAX stuff?

Question

I'm trying to read a text file, and the code that I have completely works. The problem is that I don't understand the code, especially all the onreadystatechange and new XMLHttpRequest(); and the status stuff- I am very very confused!!!!

    //load text file, and split each word into an array
function loadwords(myfile){
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", myfile, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {

                //the file is read and stored into a variable
                var Text;
                Text = rawFile.responseText;


                thewords=  Text.split("\n");
                //The variable Text has a string data type.
                //So the string is split into an array.
                //Each line being the form of separation between each element

                var i;
                for (i in thewords){

                    if ( thewords[i] == "") {
                        thewords.splice(i,1);
                    }
                }
                //The for loop checks for any empty spaces in the array.
                //Then removes them from the array using the splice method.
            }
        }
    }
    rawFile.send(null);
    return thewords;
}

Thank s very much in advance!

Answer 1

Check out this documentation on XLMHttpRequest

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

AJAX stands for 'Asynchronous Javascript and XML'

Although mostly we use it for json these days.

When you make a new XMLHttpRequest, you are setting up a new http request. the 'open' method is where you add the method and url. Once a request is opened, you can begin setting it up by adding headers, etc.. Finally, you 'send' the request. This actually initiates the request.

The readyState jam is saying 'when the state of this request changes'. 4 just so happens to be the last one, when the request is finished and has received a response. The status refers to the HTTP Status code that was sent back in the response from whatever server you just hit.

You can check those out here

https://en.wikipedia.org/wiki/List_of_HTTP_status_codes

The above code basically just says

Hey, i have a request. It's going to this place. If i get a response, and that response is not a bad one, then do something with it.

It's also worth noting that when you return the words at the bottom, you are going to get 'undefined'. That's because it doesn't exist yet. The time between the 'send' method and the 'return' statement is so small that our request might not have even reached the server yet. Honestly, it may not have even been sent at this point. This is asynchronous programming. To do something with it, you should pass a callback, and do something with it in the callback. You can also use promises. Here is an implementation with a callback.

function loadwords(myfile, callback){
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", myfile, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                return callback(rawFile.responseText);
            }
        }
    }
    // You can send data here, or pass nothing
    return rawFile.send();
}

function handler(text) {
    var thewords=  text.split("\n");
    //The variable Text has a string data type.
    //So the string is split into an array.
    //Each line being the form of separation between each element

    var i;
    for (i in thewords){

        if ( thewords[i] == "") {
            thewords.splice(i,1);
        }
    }
}

loadWords('someFile', handler);