Can two different targeted DIVs be updated simultaneously using a single ajax call?
Consider the index.html code snippet below:
<script>
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("main_body").innerHTML = xmlhttp.responseText;}
}
xmlhttp.open("GET","some_page.php",true);
xmlhttp.send();
</script>
<div id="main_body">
<div id="update_1"></div>
<div id="dont_ajax">A big size of html content....</div>
<div id="update_2"></div>
</div>
In the scenario above, all I know is that the content of some_page.php needs to be structured like this:
<php
echo "<div id="update_1"><h1>Apple</h1></div>
<div id="dont_ajax">A big size of html content....</div>
<div id="update_2"><h1>Orange</h1></div>";
?>
I want to avoid loading the content of id="dont_ajax" due to its large size. Is there a solution like the following:
<script>
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("update_1").innerHTML = xmlhttp.responseText(1);
document.getElementById("update_2").innerHTML = xmlhttp.responseText(2);}
}
xmlhttp.open("GET","some_page.php",true);
xmlhttp.send();
</script>
<div id="main_body">
<div id="update_1"></div>
<div id="dont_ajax">A big size of html content....</div>
<div id="update_2"></div>
</div>
This way, some_page.php can be simplified as:
<php
echo "<h1>Apple</h1>"; //(responseText for 1)
echo "<h1>Orange</h1>"; //(responseText for 2)
?>
I understand that my example may not work as intended, but it illustrates the issue and desired outcome. Any suggestions or alternative approaches in native JS would be appreciated.
I specifically require a solution using native JavaScript.