CODEWITHSUNDEEP
javascriptajax
MOD ER HACKS
MOD ER HACKS

Reputation: 197

How can I get the content of multiple files at a time using AJAX on page load in javascript?

I am finding a way to load multiple files at a time in my html document using vanilla AJAX ( I don't want any dependecy, the way I will get using jQuery ). Here is a piece of code I grabbed from W3schools' AJAX Documentation. :

function loadDoc() {
   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         document.querySelector("#tst").innerHTML = this.responseText;
      }
   }
   xhttp.open("GET", "ajax_info.txt", true);
   xhttp.send();
}

I am pretty new to AJAX. So, I have a confusion. The above function works fine, but I have multiple files to load and I don't want to call this function multiple times, to load the files. Let me describe my desired output. I am imagining the syntax of the updated function will be :

loadDoc(["one.txt", "two.txt", "three.txt"])

So, we observe that the input will be an array. And now the ouput will follow this format :

content of "one.txt" + break + content of "two.txt" + break + content of "three.txt" and so on....

If the content of "one.txt" is "Hello World !", content of "two.txt" is "I love", and content of "three.txt" is "Javascript", the output will be : 

Hello World !
I love
Javascript

So, can you please help me update my code ?

Upvotes: 1

Views: 123

Answers (1)

Peter Brand
Peter Brand

Reputation: 624

Pass the list of files to load to a PHP/ASP/whatever page which assembles the text for you.

function loadDoc(files) {
   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         document.querySelector("#tst").innerHTML = this.responseText;
      }
   }
   xhttp.open("GET", "ajax_info.php?files="+files, true);
   xhttp.send();
}

The files parameter could be a comma delimited list, which the page uses to get the contents and assemble it into a single return string.

Upvotes: 1

Related Questions