With the pre-fetch pattern, the Ajax code runs at the background and keeps downloading the pages that have not been downloaded, one page per 5 seconds. The problem is that if i click the link to the page that has not been downloaded, i am seeing a blank page.

How should i complete the code so that when i click the link to the page that has not been downloaded, my code will download and display the page, and my background Ajax code won’t download this page again.

I can run code using FireBug to make sure that you only download each page once.

My CSS code:

a.current {
color: black;
font-weight: bold;
text-decoration: none;
}



My php Code:


<?php
$page = 1;
$pageNum = 10;
$dataOnly = false;

if (isset($_GET["page"])) {
$page = (int)$_GET["page"];
}
if (isset($_GET["dataOnly"]) && $_GET["dataOnly"] == "true") {
$dataOnly = true;
}
if (!$dataOnly) {
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="index.css" />
<script type="text/javascript" src="index-ajax.js"></script>
<title></title>
</head>
<body>
<h1>Article Title</h1>
<div id="divLoadArea" style="display:none"></div>
<?php
$output = "<p>Page ";

for ($i = 1; $i < $pageNum+1; $i++) {
$output .= "<a href=\"#\" id=\"apage$i\"";
if ($i == $page) {
$output .= " class=\"current\"";
}
$output .=">$i</a> ";
}

echo $output;
?>
<?php
}
?>
<?php
if ($page == 1) {
?>
<div id="page1">
<p>Page 1 Content:</p>
<p>Fusce non ipsum. Nam aliquet porttitor dui. Etiam urna. Aenean non enim. Praesent magna ac arcu. In congue vel, sapien. Cras elementum. Nam id leo ultrices eget, faucibus justo arcu, eget risus. Sed sagittis venenatis. Curabitur tempor. Phasellus ut porta tincidunt. Nulla venenatis. Sed lobortis velit. Integer id justo iaculis ut, accumsan pede convallis nec, scelerisque odio non tincidunt lorem. Integer quis risus. Sed tincidunt scelerisque. Duis vel lorem. Donec condimentum interdum vehicula. Nunc elementum. Fusce venenatis convallis viverra, enim fringilla non, fringilla purus at purus. Pellentesque euismod pulvinar, quam ultrices varius. Quisque vitae sagittis nec, bibendum mi. Etiam tellus.</p>
</div>
<?php
} else if ($page == 2) {
?>
<div id="page2">
<p>Page 2 Content:</p>
<p>pretium. Vestibulum tempus. Quisque pharetra, urna quam, lobortis volutpat. Vestibulum laoreet hendrerit metus sem, vulputate tempor ac, rhoncus et, feugiat nec, nibh. Morbi mauris nibh faucibus et, fermentum eu, auctor non, dolor. Praesent wisi eget metus dolor, dictum vel, sapien. Cras aliquet. In viverra vel, eleifend in, mollis sodales. Vivamus est. Maecenas rhoncus. Praesent odio eget augue. Nulla dignissim. Donec est. Lorem ipsum pede, at libero. Cras commodo wisi. Donec in sem. Quisque arcu luctus pellentesque. Nullam aliquet. Quisque libero. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Sed scelerisque iaculis. Curabitur lacinia dignissim. Etiam wisi dui ut</p>
</div>
<?php
} else if ($page == 3) {
?>
<div id="page3">
<p>Page 3 Content:</p>
<p>pharetra. Morbi aliquam euismod nec, mattis id, placerat pharetra pede. Cras dictum quis, velit. Integer a purus. Sed venenatis. Sed condimentum sem orci, blandit id, congue dolor. Vestibulum laoreet, tortor libero, fringilla augue nec massa. Aliquam erat volutpat. Praesent magna suscipit erat. Suspendisse orci sit amet elit lectus varius laoreet. Nam vestibulum. Cras adipiscing mauris. Lorem ipsum ac posuere cubilia Curae; Nulla interdum arcu vitae porttitor egestas. Cras in faucibus quis, ipsum. Nunc leo. In euismod pulvinar mollis. Nulla tincidunt nec, nisl. Sed scelerisque urna orci massa, feugiat dui, eget dolor ut porta auctor. Aenean ipsum non enim consectetuer ac,</p>
</div>
<?php
} else if ($page == 4) {
?>
<div id="page4">
<p>Page 4 Content:</p>
<p>tortor, fermentum eget, nulla. Integer pharetra lobortis metus. Nullam fermentum libero ornare pulvinar mollis. Etiam urna fringilla ante euismod orci sem in faucibus orci luctus id, mattis non, ipsum. Duis blandit eros, sagittis porta, turpis egestas. Suspendisse a blandit tempus purus. Aenean vel libero.</p>
</div>
<?php
} else if ($page == 5) {
?>
<div id="page5">
<p>Page 5 Content:</p>
<p>In nunc venenatis nunc, at justo vel purus. Mauris auctor nibh, volutpat quis, lacinia dignissim. Phasellus semper lobortis. Maecenas id tortor. Mauris magna ipsum dolor accumsan eget, neque. In arcu accumsan ullamcorper risus. Phasellus nec dui. Aenean nonummy lacinia erat. Integer sodales nulla. Suspendisse dolor sit amet, consectetuer pede, at laoreet metus tellus, quis wisi. Aliquam</p>
</div>
<?php
} else if ($page == 6) {
?>
<div id="page6">
<p>Page 6 Content:</p>
<p>tincidunt. Nullam consequat sapien vitae arcu sed felis. Quisque adipiscing metus. Quisque quis ipsum. Curabitur sed wisi bibendum a, mauris. Donec congue. Donec tempor. Phasellus fermentum, dui pulvinar sit amet, neque. Sed ornare lobortis mauris nulla, accumsan sed, vestibulum nec, pharetra ut, metus. Aliquam semper. Sed tincidunt wisi, vitae porttitor elementum. Nunc semper, quam risus, euismod pulvinar, </p>
</div>
<?php
} else if ($page == 7) {
?>
<div id="page7">
<p>Page 7 Content:</p>
<p>litora torquent per conubia nostra, per conubia nostra, per inceptos hymenaeos. Maecenas tortor augue, dictum accumsan. Nullam tellus rutrum id, congue eu, pede. Cras turpis luctus elit, interdum viverra. Pellentesque facilisis. Phasellus ac nibh sagittis sed, quam. Donec faucibus, quam. Quisque euismod pulvinar, pede eget egestas velit. Vivamus nibh. Maecenas nec neque. Nulla iaculis leo. Vivamus faucibus orci lorem sit amet, iaculis odio, </p>
</div>
<?php
} else if ($page == 8) {
?>
<div id="page8">
<p>Page 8 Content:</p>
<p>Fusce aliquam euismod pede in velit nec lorem velit nulla facilisis eget, neque. Praesent ac turpis vitae est ultricies libero dui, non porta eget, lacinia porta. Aenean commodo odio est diam, venenatis convallis non, placerat nec, pharetra varius. Morbi id ultrices posuere cubilia Curae; Sed lobortis fringilla, vulputate vitae, dapibus vitae, commodo id, bibendum tellus, eleifend nunc vitae convallis auctor. Nam dolor rhoncus vel, eleifend et, varius nunc, accumsan orci. Vestibulum ante ipsum primis in purus sit amet pede. Fusce blandit ultrices interdum. Donec odio nec libero. Proin id lectus. Ut facilisis. Phasellus sem. Donec consectetuer elit. In gravida elit.</p>
</div>
<?php
} else if ($page == 9) {
?>
<div id="page9">
<p>Page 9 Content:</p>
<p>Etiam vel odio sagittis porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce vel leo. Integer aliquam. </p>
</div>
<?php
} else if ($page == 10) {
?>
<div id="page10">
<p>Page 10 Content:</p>
<p>In purus lacinia sit amet, est. Vivamus est. Aliquam erat volutpat. Phasellus sagittis lectus pharetra ut, consequat pharetra. Morbi dignissim, libero fermentum nonummy enim sapien eleifend vitae, velit. Mauris arcu. Mauris pellentesque, wisi. Sed venenatis. Sed et wisi accumsan et, tristique senectus et malesuada pretium. Praesent vitae fringilla viverra enim dolor sit amet nisl. Nam interdum euismod elit. Mauris metus. Aliquam commodo magna, at quam. Aliquam faucibus et, tempus tellus. Maecenas bibendum leo, a posuere a, tortor.</p>
</div>
<?php
}
?>
<?php
if (!$dataOnly) {
?>
</body>
</html>
<?php
}
?>



My Javascript file:


var iPageNum = 10;
var iCurPage = -1;
var iNextPageToLoad = -1;
var iWaitBeforeLoad = 5000;

window.onload = function() {
iCurPage = 1;
iNextPageToLoad = iCurPage + 1;

var links = document.getElementsByTagName("a");
for (var i = 0; i < iPageNum; i++) {
links[i].onclick = function(ev) {
var currpage = ev.target.id.substring(5);
showPage(currpage);
ev.preventDefault();
};
}

setTimeout(loadNextPage, iWaitBeforeLoad);
}

function loadNextPage() {
var url = "index.php?page=" + iNextPageToLoad + "&dataOnly=true";
var req = new XMLHttpRequest();
req.open("GET", url);
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200) {
var loadDiv = document.getElementById("divLoadArea");
loadDiv.innerHTML = req.responseText;
var divNode = document.getElementById("page"+iNextPageToLoad);
divNode.style.display = "none";
document.body.appendChild(divNode);
loadDiv.innerHTML = "";
iNextPageToLoad++;
setTimeout(loadNextPage, iWaitBeforeLoad);
}
}
req.send(null);

}

function showPage(cpage) {
for (var i = 0; i < iPageNum; i++) {
var currentPage = i+1;
var divPage = document.getElementById("page"+currentPage);
var pageLink = document.getElementById("apage"+currentPage);
if (divPage && currentPage == cpage) {
divPage.style.display = "block";
pageLink.className = "current";
} else if (divPage) {
divPage.style.display = "none";
pageLink.className = "";
}
}
}