Programmation PHP/Ajax/Sommaire

Ajax : comment créer un sommaire

modifier

Intérêt de l'utilisation d'Ajax

modifier

Lorsqu'on écrit un sommaire en PHP classique, à chaque fois qu'on clique sur un lien la totalité de la page est affichée. Sur un sommaire, cela crée un effet de clignotement indésirable et d'autant plus important que la page est lourde. De plus, comme il faut régénérer toute la page, la tendance est à surcharger le serveur avec des requêtes inutiles.

Avec la technologie AJAX, seule la partie qui est modifiée dans la page est rechargée. On diminue ainsi à la fois la charge du serveur, celle du réseau et l'effet de clignotement.

  • Sans la technologie AJAX, on observe un effet de clignotement.
  • Avec Ajax, plus de clignotement et un site plus rapide.

Remarque :

  • ici on voit très peu la différence (quasiment pas d'ailleurs) car le site est super simple. Si le site était plus complexe notamment avec des accès à une base de données, la différence serait beaucoup plus nette !
  • Regardez aussi la différence au niveau de l'utilisation des retours en arrière.

Les fichiers

modifier

Le fichier index.html

modifier
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Sommaire en PHP !</title>
  <style type="text/css">
  #sommaire
  {
  position:absolute;
  background-color:cyan;
  left:10px;
  width:100px;
  }

  #page
  {
  position:absolute;
  background-color:#AAAAAA;
  left : 200px;
  width:500px;
  height:500px;
  }
  </style>

<script type='text/JavaScript'>
var xhr = null; 
function getXhr()
{
     if(window.XMLHttpRequest)xhr = new XMLHttpRequest(); 
else if(window.ActiveXObject)
  { 
  try{
     xhr = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) 
     {
     xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
  }
else 
  {
  alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
  xhr = false; 
  } 
}

function ShowPage(page)
{
getXhr();
xhr.onreadystatechange = function()
    {
     if(xhr.readyState == 4 && xhr.status == 200)
     {
     document.getElementById('page').innerHTML=xhr.responseText;
     }
    }
xhr.open("GET","ajax.php?page="+page,true);
xhr.send(null);
}

</script>

</head>

<body onLoad="ShowPage(1)">

    <div id="sommaire">
        <h3>Sommaire</h3>
        <a href="#" onClick="ShowPage(1)">Page 1</a><br/>
        <a href="#" onClick="ShowPage(2)">Page 2</a><br/>
        <a href="#" onClick="ShowPage(3)">Page 3</a><br/>
        <a href="#" onClick="ShowPage(4)">Page 4</a><br/>
    </div>

    <div id="page">
    </div>

  </body>
</html>

Le fichier ajax.php

modifier
<?php

$page=$_GET['page'];
     if($page==1)require 'page1.html';
else if($page==2)require 'page2.html';
else if($page==3)require 'page3.html';
else require 'page4.html';

?>

Le fichier page1.html

modifier
<h1>Page 1</h1>
bla bibib blan

Le fichier page2.html

modifier
<h1>Page 2</h1>
bonjour

Le fichier page3.html

modifier
<h1>Page 3</h1>
bli bli bli

Le fichier page4.html

modifier
<form method="get" action="http://www.google.com/search"><fieldset style="border: 1px solid black;"><legend style="font-family:verdana;font-weight:bold;font-size:1em;color:orange;">Recherche Google</legend><TABLE><tr><td align="center"><div style="text-align: center;">
<A HREF="http://www.google.fr">
<IMG SRC="http://www.google.com/logos/Logo_40wht.gif" border="0" 
ALT="Google" align="middle"></A></div></td></tr>
<tr><td align="center"><div style="text-align: center;"><INPUT TYPE=text name=q size=20 value="">
<INPUT TYPE=hidden name=hl value=fr></div></td></tr>
<tr><td align="center" colspan="2"><div style="text-align: center;"><INPUT style="border: 2px outset purple;color:white;background-color:purple;font-weight:bold;font-family:verdana;" type=submit name=btnG VALUE="Recherche"></div>
</td></tr></TABLE>
</FORM></fieldset>