Du DHTML orienté objet.
Dans le cas d'une page contenant un script côté serveur, ce dernier est exécuté et les résultats affichés sont retournés par l'objet XMLHTTP Request.
Voici un exemple de paginateur rapide :
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>Paginateur-AJAX</title>
<script type="text/javascript">
//Mémoire des pages à paginer
var pages = new Array("p1.htm","p2.htm","p3.htm");
//Afficheur dynamique
function afficher(texte){
document.all["afficheur"].innerHTML = texte;
}
//Pagination
function aller_à(sens){
//Si la mémoire des pages n'existe pas ou vide : rien à faire
if (!pages || pages.length <=0) return false;
//index de la page actuelle
var index_actuel = document.all["index_actuel"].value;
//Recalculer l'index actuel selon le sens
if(sens == 'précédent') index_actuel --;
if (index_actuel < 0) index_actuel = 0; //Correction de l'index : borne inf.
if(sens == 'suivant') index_actuel ++;
if (index_actuel >= pages.length) index_actuel = pages.length -1; //Correction de l'index : borne sup.
//Mémoriser l'index actuel
document.all["index_actuel"].value = index_actuel;
//Et en afficher la page
afficher(contenu(pages[index_actuel]));
return true;
}
//Lecture du contenu d'un fichier
function contenu(fichier){
if(window.XMLHttpRequest) // FIREFOX
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else
return(false);
xhr_object.open("GET", fichier, true);
xhr_object.send(null);
if(xhr_object.readyState == 4) return(xhr_object.responseText);else return(false);
}
</script>
</head>
<body>
<form>
<input type=button value="<" onClick="aller_à('précédent')" />
<input type=button value=">" onClick="aller_à('suivant')" />
<input type=hidden name="index_actuel" value="0" />
<div id="afficheur"></div>
</form>
<script>
//Par défaut afficher la première page
aller_à(0);
</script>
</body>
</html>
p1.htm, p2.htm et p3.htm
