Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Users Search
Help Dashboard Sign In Sign Up
Q&A Code Reviews Meta
Q&A
Posts Tags Edits
Ask Question

Welcome to Software Development on Codidact!

Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.

Comments on How to load two or more files in one AJAX call?

Post

How to load two or more files in one AJAX call?

+0
−1

In my browser's JavaScript console I can add to the <body> element one file (index.html) with the following AJAX code:

const whereToLoad = document.querySelector("body");
const ajax = new XMLHttpRequest();
ajax.open("GET", "/index.html", false);
ajax.send();
whereToLoad.innerHTML += ajax.responseText;

I tried to change ajax.open to load two files instead, but that failed:

ajax.open(
"GET",
"/index.html", 
"image.svg", 
false
);
ajax
posted about 3 years ago
3y ago
deleted user
History
Why does this post require attention from curators or moderators?
You might want to add some details to your flag.
Why should this post be closed?

1 comment thread

`open` accepts only one URL. You'll probably have to add a callback after the first request is finish... (3 comments)
`open` accepts only one URL. You'll probably have to add a callback after the first request is finish...
hkotsubo‭ wrote about 3 years ago · edited about 3 years ago
copy link

open accepts only one URL. You'll probably have to add a callback after the first request is finished:

ajax.onload = function () {
    // Request finished, make another AJAX call here
    var anotherAjax = new XMLHttpRequest();
    // anotherAjax.open, send, etc...
};
ajax.send();

And, for multiple URL's, you'll have to create another callback for anotherAjax.onload, and then another callback inside it, and so on (welcome to callback hell).

Or you can use fetch API with Promise.all (as the last example here).

That said, what exactly do you need to do? Maybe there's a better solution...

deleted user wrote about 3 years ago · edited about 3 years ago
copy link

Thanks hkotsubo‭ what I am ought to do is to load a certain module of three files (patterned as structure.html, style.css and image.svg) into the DOM of each webpage in my website.

I seek a JS solution is because I prefer not to touch the PHP template files of my content management system.

deleted user wrote about 3 years ago
copy link

While I should load the first file into the DOM, that's not what I should do with the other two files (they should be loaded from within the appended HTML but it doesn't happen for some reason I should try to isolate and take care of).