How to load an array of files using Ajax?

Question

using pure JavaScript/Ajax, I would like to take an array of file names(like: ["Data.txt", "UserInfo.txt", "Project.txt"]), and then load their data into an array.

The code would look like this:

var fileNames = ["Data.txt", "UserInfo.txt", "Project.txt"],
    fileData = [],
    client = new XMLHttpRequest();
client.onreadystatechange = function() {
    if (client.readyState === 4) {
        fileData.push(client.responseText);
    };
};
for(i = 0; i < fileNames.length; i++){
    client.open('GET', fileNames[i]);
    client.send();
};
console.log(fileData);

. And that is what I tried to do, but it didn't work correctly.

How can I achieve this?

Thank you.

What is this fileData.push = client.responseText? Doesn't look right. Also, if I'm not wrong, this looks like everyday ajax problem. When you log fileData the files are not returned by the response yet. — elclanrs
– elclanrs, Commented Jan 23, 2014 at 1:35
@elclanrs Thanks for pointing that out, I have fixed the first part but I am not sure what to do about the second part. Thank again... :) — Progo
– Progo, Commented Jan 23, 2014 at 1:46

Edgar Alexander · Accepted Answer · 2014-01-23 01:51:24Z

1

You're making asynchronous requests, this is how it should be for synchronous requests:

var fileNames = ["Data.txt", "UserInfo.txt", "Project.txt"],
    fileData = [],
    client = new XMLHttpRequest();

for(i = 0; i < fileNames.length; i++){
    client.open('GET', fileNames[i], false);
    client.send();
    fileData.push(client.responseText);
};
console.log(fileData);

answered Jan 23, 2014 at 1:51

Edgar Alexander

3744 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Progo Over a year ago

What do you mean by asynchronous and synchronous requests? What is the difference? Thanks.

Progo Over a year ago

Well, your solution does work! I would still like to know the answer to my previous comment… :)

Edgar Alexander Over a year ago

Asynchronous requests are executed in a different thread of the application, with this process the main program doesn't have to wait for an instruction to be completed in order to execute the next code, what happened here was that all the requests where overwrited by each iteration and the previous where aborted, only the last one could make it, when you do a synchronous request the program will have to wait until a requested page gets downloaded for execute the next instruction. As you can see, we don't use any callback like readystatechange in the new model, just the loop.

Collectives™ on Stack Overflow

How to load an array of files using Ajax?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related