Pre dynamické zmeny na stránke bez jej obnovenia je možné použiť načítanie obsahu externej stránky javascriptom a jeho vloženie do existujúcej.
Výhodné je to použiť napríklad pre obnovovanie stavovej informácie, prípadné paralelné načítanie viacerých informácií.
Kód html, dole span prvky budú mať prepísaný obsah z externých stránok:
<html>
<head>
<script type='text/javascript' src='tabulka.js?v=2'></script>
<style>
.grida2 {
display: grid;
grid-template-columns: auto auto;
max-width: 980px;
# margin: auto;
}
.grida2 > div {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div class="grida2">
<div> <span id='OBS1'>nacitavam tabulku1.. </span> </div>
<div> <span id='OBS2'>nacitavam tabulku2.. </span> </div>
</div>
</body>
</html>
Je tu použitý CSS grid, pre zobrazenie dvoch stĺpcov s obsahom vedľa seba.
Javascript zabezpečí prvé načítanie a pravidelné obnovovanie obsahu:
var MyTimer = null;
var MyPocetSecund = 31;
function requestHttp(url,nazovObj)
{
var request = null;
try {request = new XMLHttpRequest();}
catch(e) {
try {request = new ActiveXObject('Microsoft.XMLHTTP');}
catch(e) {request = null;}
}
if(request == null) { return; }
request.onreadystatechange = function()
{
if (request.readyState == 4)
{
if (request.status == 200)
{
document.getElementById(nazovObj).innerHTML = request.responseText;
}
}
}
request.open('GET', url, true);
request.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
request.setRequestHeader("Expire", "now");
request.setRequestHeader("Pragma", "no-cache");
request.send(null);
}
function RefreshStranky()
{
url1 = 'obsp1.php';
url2 = 'obst1.php';
requestHttp(url1,'OBS1');
requestHttp(url2,'OBS2');
MyTimer = window.setTimeout('RefreshStranky();',(MyPocetSecund + Math.floor(Math.random() * 5 ))*1000);
}
RefreshStranky();
Novšia možnosť je sťahovať obsah cez fetch-API:
async function getData(url2,nazovObj2){
const response= await fetch(url2);
const data= await response.text();
document.getElementById(nazovObj2).innerHTML=data;
}
