Pour obtenir une page dynamique sans rechargement complet, il faut pouvoir la manipuler par JS.
Exemple : Un formulaire qui traite toutes les informations par JS, un bouton pour cacher/afficher un bloc de texte, des "fenêtres"... Les possibilités sont illimitées (pour les fenêtres, utilisez un framework :p)

Etape 1 : Etiqueter la page
Pour que JS puisse s'y retrouver dans votre page xHTML, la manière la plus simple est de donner des id aux balises.

<p id="nomLabel">Texte</p>
<div id="nomLabel2">Bloc de page</div>

Si vous le pouvez, utilisez toujours des balises sémantiques, pas la peine de charger sa page de div et de span inutiles si des balises adéquates existent.

Etape 2 : Accéder à la page par JS
Pour accéder par JS à une balise étiquetée, c'est la fonction getElementById();

var element = document.getElementById("nomLabel");

Ensuite, on peut faire plein de trucs avec cette variable element, récupérer/modifier ce qu'il ya  à l'intérieur de la paire de balises (innerHTML), modifier ses attributs CSS (afficher/masquer par exemple), récupérer la valeur dans le cas d'un <input > d'un form.

alert(element.innerHTML);
alert(element.value); //Si la balise est de type input
element.style.display = "none"; //Masque le bloc
element.style.border = "1px solid red"; //Bidouiller les propriétés CSS
element.className = "nomClasse"; //Modifier la classe CSS appliquée à l'élément

De façon générale, les attributs CSS gardent leur nom en JS, sauf s'ils contiennent des tirets (z-index devient zIndex par exemple)

Vous avez déjà de quoi faire un formulaire géré par JS, et pas mal de bidouillis.


Exemple : un bouton qui affiche/masque un bloc de texte.
Code xHTML

<p id="texte" style="display : none;">Lorem ipsum dolor sit amet, etc...</p>
<a href="javascript:void(0);" onclick="toggleText(this);">Afficher le texte</a>

Code JS

function toggleText (link){
    var element = document.getElementById("texte");
    if (element.style.display == "none"){
        element.style.display = "block";
        link.innerHTML = "Masquer le texte";
    }else{
        element.style.display = "none";
        link.innerHTML = "Afficher le texte"; 
    }
}

Voilà. Ce que j'ai fait est affreux sur un plan accessibilité, car quiconque n'a pas activé JS ne verra jamais le texte. Le mieux est de faire un texte visible par défaut, d'appeler juste après un bout de JS qui aura pour fonction de le cacher. Comme ça, celui qui a JS ne le verra pas par défaut, et pourra faire joujou avec, mais celui qui n'a pas JS activé le verra. (L'important c'est de transmettre des infos, plus que de pouvoir les cacher/masquer)

Voilou, j'espère que ce tuto assez basique vous sera utile !