Load Multiple Text Files using Multiple XMLHttpRequest

Question

I'm creating a mad-libs style webapp using JavaScript, and I'm trying to load the lines of several different text files into the same number of different arrays, and I'm having trouble figuring out how to get it to work. Everything is on a server, and the text files are on the server as well.

I had it working with using just one text document, but I can't use just one document for the final product because I need 4 different word types, where each .txt file is a list of one word type. In the end, the code uses the resulting array's value at a previously-determined position and inserts that word into a sentence (a variable called "generatedidea").

Can someone help me figure out how to make this work? Or otherwise suggest a better way to do it? When I run it as it is right now, all I get is each of the alerts about the document not being ready to parse twice...

var typesFile = new XMLHttpRequest();
var types = [];
typesFile.open("GET", "values/gametypes.txt", true);
typesFile.onreadystatechange = function()
{
  if (typesFile.readyState === 4) {  // document is ready to parse.
    if (typesFile.status === 200) {  // file is found
      types = typesFile.responseText.split("\n");
    } else alert("gametypes.txt not found");
  } else alert("gametypes.txt not ready to parse");
}
typesFile.send(null);

var nounsFile = new XMLHttpRequest();
var nouns = [];
nounsFile.open("GET", "values/nouns.txt", true);
nounsFile.onreadystatechange = function()
{
  if (nounsFile.readyState === 4) {  // document is ready to parse.
    if (nounsFile.status === 200) {  // file is found
      nouns = nounsFile.responseText.split("\n");
    } else alert("nouns.txt not found");
  } else alert("nouns.txt not ready to parse");
}
nounsFile.send(null);

var verbsFile = new XMLHttpRequest();
var verbs = [];
verbsFile.open("GET", "values/verbs.txt", true);
verbsFile.onreadystatechange = function()
{
  if (verbsFile.readyState === 4) {  // document is ready to parse.
    if (verbsFile.status === 200) {  // file is found
      verbs = verbsFile.responseText.split("\n");
    } else alert("verbs.txt not found");
  } else alert("verbs.txt not ready to parse");
}
verbsFile.send(null);

generatedidea += "A ";
generatedidea += types[gt] + " ";
generatedidea += "game where a ";
if (a1 >= 0) generatedidea += nouns[a1] + " ";
generatedidea += nouns[n1] + " ";
generatedidea += verbs[v1] + " a ";
if (a2 >= 0) generatedidea += nouns[a2] + " ";
generatedidea += nouns[n2];
if (n3 >= 0) {
generatedidea += " while ";
if (a3 >= 0) {generatedidea += nouns[a3] + " ";}
generatedidea += nouns[n3] + " ";
}
if (v2 >= 0) generatedidea += verbs[v2] + " a ";
if (n4 >= 0) {
if (a4 >= 0) {generatedidea += nouns[a4] + " ";}
generatedidea += nouns[n4];
}
generatedidea += ".<br />";

Answer 1

You shall have in mind, that JavaScript works asynchronously. So after you define a closure/function for onreadystatechange the code continues with execution. In the end the lines like

generatedidea += nouns[n1] + " "; generatedidea += verbs[v1] + " a ";

will be executed before you parse the data retrieved by the AJAX call (site note: Have you defined the variables gt, a1, ... properly?)

I recommend you, to use jQuery and their API for deferred objects. For example:

var ajaxCall1 = $.get("url1", function (data) { /* do parsing here */ });
var ajaxCall2 = $.get("url2", function (data) { /* do parsing here */ });

$.when(ajaxCall1, ajaxCall2, ...).done(function () {
    // every AJAX call is done, do the rest...
});