Après le chargement principal de la page HTML, on peut charger du contenu à partir du serveur en remplaçant certain contenu, au lieu de recharger toute la page. C’est aussi simple que cela. AJAX signifie “Asynchronous JavaScript and XML”, et visait à ne charger que les documents XML. Mais nous avons rapidement utilisé cette technique pour charger à peu près tout, et la partie XML a été vite oubliée. La partie asynchrone est donc devenue la killer feature, mais c’est quoi ?
“AJAX ne doit pas rompre le Web”
Lorsque les graphistes proposent une interface sous forme d’onglet, cela signifie qu’il y aura certainement beaucoup de contenus : si nous chargeons tout d’un coup, la page deviendra très lente à l’affichage. Donc nous pouvons, techniquement, dire au navigateur de ne charger que le premier onglet par exemple, puis qu’au clic sur un onglet par l’internaute de charger le contenu associé à ce moment là.
Cette technique utilise comme son nom l’indique le langage Javascript qui sera interprété par le navigateur… si l’internaute a désactivé le moteur JS de son navigateur, le contenu ne pourra pas être affiché.
Le serveur à notre rescousse pour rendre notre page “unobtrusive”
“Unobtrusive” est l’adjectif anglophone que nous traduisons par “non-intrusif” : ce terme signifie que nous proposons à l’internaute d’accéder à notre contenu sans le bloquer à cause de la technologie. Dans notre cas, un utilisateur qui aura désactivé Javascript (lui-même, par le biais de sa DSI ou encore par son proxy), n’aura jamais accès à un contenu qui sera affiché par l’exécution d’une requête PHP/MySQL par exemple via une fonction Javascript. Grosso-modo, si le clic sur un onglet correspond à une fonction type “onclick” (javascript), alors il ne se passera rien.
Par contre il existe une solution toute logique, et surtout qui est “une bonne pratique”.
La bonne pratique AJAX
La bonne pratique voudrait en réalité que dans un premier temps nous proposions au navigateur un lien vers une page correspondant au clic sur l’onglet.
<ul>
<li class="onglet"><a href="hebergement-description.php">Description</a></li>
<li class="onglet"><a href="hebergement-photos.php">Photos</a></li>
</ul>
<div id="contenu"><!-- Insère le contenu ici --></div>Puis dans un second temps, la fonction JS (externe évidement, et ici en jQuery) :
$(document).ready(function(){
$('.onglet a').click(function(){
var url = $(this).attr('href');
$('#contenu').load(url);
return false;
});
});Cette fonction prend le pas sur les liens qui se trouvent dans les <li> qui ont la classe “onglet” : le return false; stoppe l’exécution du “href” ; cela signifie que lorsque l’internaute clique sur un onglet, le javascript récupère l’url du lien, charge le contenu de la page visée dans la div “contenu” sans recharger toute la page. Le lien ne sera pas suivi, nous avons déjà récupérer et insérer le nouveau contenu.
C’est la fameuse “killer feature”.
Mais on ne s’arrête pas là !
En effet, si on fait cela on insère tout le contenu de la page en question. Hors nous ne pouvons pas insérer les contenus html comme les métadonnées (ainsi que toutes les balises qui caractérisent une page html) dans la div “contenu” !!
Nous ne pouvons pas non plus, ne pas inclure ses balises dans la deuxième page html, sinon si Javascript est désactivé lors du clic, sera proposé à l’internaute une page ne comprenant que le texte (notre contenu), sans header ni menu ni footer ni moteur de recherche ni tout-ce-qu-on-a-autour-du-contenu-principal…
La solution vient du côté serveur (ici Apache-Php pour l’exemple) : Il faut entouré le code que l’on ne veut pas — le header et le footer — par exmple, par ce code :
if($_SERVER['HTTP_X_REQUESTED_WITH']==''){ include('header.php'); }Ici c’est le contenu que nous souhaitons intégrer dans notre div “contenu”. Mais pas le reste.
if($_SERVER['HTTP_X_REQUESTED_WITH']==''){ include('footer.php'); }Ici la syntaxe :
if($_SERVER['HTTP_X_REQUESTED_WITH']=='')nous permet de communiquer au serveur (grâce à jQuery qui envoie un entête) que nous sollicitons ou non une requête AJAX.
Si Javascript est activé, alors on dit au serveur : “ceci est une requête AJAX, renvoi nous tout ce qui est en dehors de ce code”, et inversement si Javascript ne l’est pas, alors on ne dit rien au serveur… donc il nous renvoie automatiquement toute la page, ceci étant le fonctionnement logique. Les tekos préféreront sûrement mieux cette syntaxe
if (isset($_SERVER['HTTP_X_REQUESTED_WITH'])
$_SERVER['HTTP_X_REQUESTED_WITH']=="XMLHttpRequest") {
}else{
// header("Location: " . base_url());
}Bref, à vous de jouer maintenant pour que nos sites soient “unobtrusives” !