• JavaScript>XMLHttpRequest -
  • Publié le :  | Modifié le :

chargement de page avec XMLHttpRequest

Comment charger un parti de votre document HTML avec les XMLHttpRequest en JavaScript.

Le code utilisé.

Cette requête s'effectue en trois temps. D'abord un Listener, puis une fonction qui parse l'url du lien, et la requête XMLHttpRequest proprement dite. Le code est largement commenté.

  1. // LISTENER SUR LE LIEN QUI SERA CLIQUÉ
  2. BOUTON.addEventListener('click',function(e){
  3.         hrefSearch=parseQuery(this.getAttribute("href"));
  4.         histPush=this.getAttribute("href");// Mise en cache du href du lien.
  5.         loadHTMLDoc(hrefSearch);// La fonction Ajax pour charger le document.
  6.         e.preventDefault();// Empêcher la page de se recharger.
  7. },false);

  9. // RETOURNE LA PAGE DU LIEN
  10. functionparseQuery(qstr){
  11.         vara=qstr.split('?id=');// Chercher la page dans le href du Listener.
  12.         returna[1];// Retourne la page.
  13. }

  15. // CHARGEMENT DE DOCUMENT EN AJAX (XMLHttpRequest en JavaScript)
  16. functionloadHTMLDoc(urlD){
  17.         varurl="dossier"+urlD+".html";// La page recherchée.
  18.         frame=document.getElementById('site-content');// l'élément cible.
  19.         varrequest;
  20.         request=newXMLHttpRequest();
  21.         request.open('GET',url,true);
  22.         request.setRequestHeader("Content-Type","text/html;charset=UTF-8");// Pour l'accentuation.
  23.         //request.setRequestHeader('Cache-Control', 'no-cache'); Gestion de la mise en cache.
  24.         request.onload=function(){
  25.          if(request.status>=200&&request.status<400){// Succès!
  26.                 // Changer l'url dans l'historique du navigateur. Au cas où il y ait un refresh(F5)
  27.                 if(history.pushState){history.pushState(null,null,histPush);}
  28.                 frame.innerHTML=request.responseText;// Insertion du document vers l'élément cible.
  29.                 document.title= tab[urlD];// Changer le titre du document.
  30.                 window.scrollTo(0,0);// retour haut de page.
  31.          }else{
  32.            // Érreur
  33.            window.location="./erreur.html";
  34.          }
  35.         };
  36.         request.onerror=function(){
  37.            // Si il y a une erreur de connection.
  38.            window.location="./erreur.html";
  39.         };
  40.         request.send();// Envoyer la requête.
  41. }

Conclusion:

Cette méthode vous permet de charger des documents dans le cadre de votre site, rapidement. Cependant elle a des inconvénients notament pour l'indexation de vos pages puisque les balises meta ne sont pas modifiées. Le titre du doument doit être modifié en créant un tableau avec toutes les données afférentes, ce qui entraine une maintenance accrue. Mais cette méthode accelère largement la navigation quand vous êtes sur une tablette ou un smartphone.