Section courante

A propos

Section administrative du site

Introduction

L'AJAX, abréviation adopté par la communauté de «Asynchrone Javascript And Xml». Dans les modèles d'optimisation les plus intéressants des dernières années, l'AJAX est sans nulle doute la technique la plus intéressante. Toutefois, elle ne fonctionne pas avec tous les navigateurs, ce modèle est supporté par Internet Explorer avec l'Active X autorisé, Netscape, Firefox, Opera et Safari, mais lorsqu'on entre dans les navigateurs moins classique, comme par exemple sous DOS et ne supportant pas le JavaScript, alors cette technique devient impossible. En faite, on devrait dire que pour une application professionnel cette technique est crucial, mais pour un simple site informatif, la chose est beaucoup moins certaine.

L'idée dernière le AJAX c'est bien simple, effectuer un chargement d'un morceau de la page suite à une action ou un événement utilisateur.


Exemple d'une simpla chaine de caractères retourner en AJAX

Ecran de sortie

Le code présenté ici est inspiré d'à peu près tous les codes existant sur Internet, je n'ai pas réinventé la roue. Il est en deux morceaux, la page HTML contenant le code JavaScript et une fichier XML le plus simple possible. Voici enfin le petit code source permettant de produire cette effet :

  1. <script language="JavaScript" type="text/javascript">
  2. function makeRequest(URL,Caption) {
  3.  var RequeteHTTP=false;
  4.  if(window.XMLHttpRequest) { // Mozilla, Safari,...
  5.   RequeteHTTP = new XMLHttpRequest();
  6.   if(RequeteHTTP.overrideMimeType) RequeteHTTP.overrideMimeType('text/xml');
  7.  } else if(window.ActiveXObject) { // Internet Explorer
  8.   try {
  9.    RequeteHTTP = new ActiveXObject("Microsoft.XMLHTTP");
  10.   } catch (e) {
  11.    try {
  12.     RequeteHTTP = new ActiveXObject("Msxml2.XMLHTTP");
  13.    } catch (e) {}
  14.   }
  15.  }
  16.  if(RequeteHTTP) {
  17.   RequeteHTTP.onreadystatechange = function() { 
  18.    var DocumentXML = RequeteHTTP.responseXML;
  19.    try {
  20.     document.getElementById(Caption).innerHTML=DocumentXML.getElementsByTagName("root").item(0).firstChild.data;
  21.    } catch(e) {}
  22.   };
  23.   RequeteHTTP.open("GET", URL, true);
  24.   RequeteHTTP.send(null);
  25.  }
  26.   else 
  27.  alert("Opération annuler: Impossible de créer une instance XML par HTTP");
  28. }
  29. </script>
  30. <INPUT TYPE=BUTTON Value="Appellez la page XML" onclick="makeRequest('test.xml','spSortie')">
  31. <TABLE Border=1 BgColor="#000000" BorderColor="#000000" Width=100%><TR><TD>
  32. <FONT COLOR=White>
  33. <SPAN COLOR=White ID=spSortie>
  34. Ecran de sortie<BR>
  35. </SPAN>
  36. </FONT>
  37. </TD></TR></TABLE>

Et le code source «test.xml» charger lorsque vous appuyez sur le bouton :

<?xml version="1.0" ?>
<root>
Je suis un test.
</root>

Exemple de multiple chaîne de caractères retourner en AJAX

Dans cet exemple, nous utilisons deux fichiers XML contenu chacun une liste des provinces du Canada et une de la liste des Etats des Etats-Unis. Nous chargerons, les données de province ou d'état a chaque fois que l'utilisateur sélectionnera un pays différent. Voici, tout d'abord le fichier XML «canada.xml» :

<?xml version="1.0" encoding="ISO-8859-1"?>
<result>
<province>
<id>1</id>
<name>Alberta</name>
</province>
<province>
<id>2</id>
<name>Colombie Britannique</name>
</province>
<province>
<id>3</id>
<name>Ile-du-Prince-Édouard</name>
</province>
<province>
<id>4</id>
<name>Manitoba</name>
</province>
<province>
<id>5</id>
<name>Nouveau-Brunswick</name>
</province>
<province>
<id>6</id>
<name>Nouvelle-Écosse</name>
</province>
<province>
<id>7</id>
<name>Nunavut</name>
</province>
<province>
<id>8</id>
<name>Ontario</name>
</province>
<province>
<id>9</id>
<name>Québec</name>
</province>
<province>
<id>10</id>
<name>Saskatchewan</name>
</province>
<province>
<id>11</id>
<name>Terre-Neuve</name>
</province>
<province>
<id>12</id>
<name>Territoires du Nord Ouest</name>
</province>
<province>
<id>13</id>
<name>Yukon</name>
</province>
</result>

Voici, ensuite le fichier XML «usa.xml» :

<?xml version="1.0" encoding="ISO-8859-1"?>
<result>
<province>
<id>16</id>
<name>Alabama</name>
</province>
<province>
<id>17</id>
<name>Alaska</name>
</province>
<province>
<id>18</id>
<name>Arizona</name>
</province>
<province>
<id>19</id>
<name>Arkansas</name>
</province>
<province>
<id>20</id>
<name>Californie</name>
</province>
<province>
<id>21</id>
<name>Caroline du Nord</name>
</province>
<province>
<id>22</id>
<name>Caroline du Sud</name>
</province>
<province>
<id>23</id>
<name>Colorado</name>
</province>
<province>
<id>24</id>
<name>Connecticut</name>
</province>
<province>
<id>25</id>
<name>Dakota du Nord</name>
</province>
<province>
<id>26</id>
<name>Dakota du Sud</name>
</province>
<province>
<id>27</id>
<name>Delaware</name>
</province>
<province>
<id>81</id>
<name>Distric of Colombia</name>
</province>
<province>
<id>28</id>
<name>Floride</name>
</province>
<province>
<id>29</id>
<name>Georgie</name>
</province>
<province>
<id>30</id>
<name>Hawaii</name>
</province>
<province>
<id>31</id>
<name>Idaho</name>
</province>
<province>
<id>32</id>
<name>Illinois</name>
</province>
<province>
<id>33</id>
<name>Indiana</name>
</province>
<province>
<id>34</id>
<name>Iowa</name>
</province>
<province>
<id>35</id>
<name>Kansas</name>
</province>
<province>
<id>36</id>
<name>Kentucky</name>
</province>
<province>
<id>37</id>
<name>Louisiane</name>
</province>
<province>
<id>38</id>
<name>Maine</name>
</province>
<province>
<id>39</id>
<name>Maryland</name>
</province>
<province>
<id>40</id>
<name>Massachusetts</name>
</province>
<province>
<id>41</id>
<name>Michigan</name>
</province>
<province>
<id>42</id>
<name>Minnesota</name>
</province>
<province>
<id>43</id>
<name>Mississippi</name>
</province>
<province>
<id>44</id>
<name>Missouri</name>
</province>
<province>
<id>45</id>
<name>Montana</name>
</province>
<province>
<id>46</id>
<name>Nebraska</name>
</province>
<province>
<id>47</id>
<name>Nevada</name>
</province>
<province>
<id>48</id>
<name>New Hampshire</name>
</province>
<province>
<id>49</id>
<name>New Jersey</name>
</province>
<province>
<id>51</id>
<name>New York</name>
</province>
<province>
<id>77</id>
<name>North Las Vegas</name>
</province>
<province>
<id>50</id>
<name>Nouveau Mexique</name>
</province>
<province>
<id>52</id>
<name>Ohio</name>
</province>
<province>
<id>53</id>
<name>Oklahoma</name>
</province>
<province>
<id>54</id>
<name>Oregon</name>
</province>
<province>
<id>55</id>
<name>Pennsylvanie</name>
</province>
<province>
<id>56</id>
<name>Rhode Island</name>
</province>
<province>
<id>57</id>
<name>Tennessee</name>
</province>
<province>
<id>58</id>
<name>Texas</name>
</province>
<province>
<id>59</id>
<name>Utah</name>
</province>
<province>
<id>60</id>
<name>Vermont</name>
</province>
<province>
<id>61</id>
<name>Virginie</name>
</province>
<province>
<id>63</id>
<name>Virginie Occidentale</name>
</province>
<province>
<id>62</id>
<name>Washington</name>
</province>
<province>
<id>64</id>
<name>Wisconsin</name>
</province>
<province>
<id>65</id>
<name>Wyoming</name>
</province>
</result>

Voici finalement le code source JavaScript contenant le code AJAX :

  1. <form name="currEdit">
  2. <select name="pays" class="inputText" id="pays" style="width:310px;" onchange="updateThisProvince('pays','province');">
  3.      <option value="0">Sélectionner...</option>
  4.      <option value="8">Canada</option>
  5.      <option value="11">Etats-Unis</option>
  6. </select>
  7. <select name="province" class="inputText" id="province" style="width:310px;">
  8.      <option value="0">Sélectionner...</option>
  9. </select>
  10. </form>
  11. <script language="JavaScript" type="text/javascript">
  12.      function AddTagOption(list,valeur,texte) {
  13.              var option = document.createElement("OPTION");
  14.          option.value = valeur;
  15.          option.text  = texte;
  16.          list.options.add(option);
  17.      }
  18.  
  19.      function updateThisProvince(country_id,province_id) {
  20.           var country_id = document.getElementById(country_id).value; 
  21.           var list = document.getElementById(province_id);
  22.          var request; 
  23.           for(var i = list.options.length - 1; i > 0; i--) list.remove(i);
  24.           if (window.XMLHttpRequest) request = new XMLHttpRequest();
  25.          if (window.ActiveXObject) {
  26.              var names = [
  27.                  "Msxml2.XMLHTTP.6.0",
  28.                  "Msxml2.XMLHTTP.3.0",
  29.                  "Msxml2.XMLHTTP",
  30.                  "Microsoft.XMLHTTP"
  31.              ];
  32.              for(var i in names) {
  33.                  try{ request = new ActiveXObject(names[i]); }
  34.                  catch(e){}
  35.              }
  36.          }
  37.           switch(country_id) {
  38.                case "8":request.open('GET', "canada.xml", true);  break;
  39.                case "11":request.open('GET', "usa.xml", true);  break;
  40.                default:return;
  41.           }
  42.          request.onreadystatechange = function() {  
  43.            if (request.readyState == 4) {  
  44.               if(request.status == 200) {  
  45.                   response  = request.responseXML.documentElement;
  46.                   for(var I = 0; I < response.getElementsByTagName('id').length; I++) {
  47.                             AddTagOption(list,response.getElementsByTagName('id')[I].firstChild.data,response.getElementsByTagName('name')[I].firstChild.data);
  48.                   }
  49.                 }  
  50.               else  
  51.                 alert('Error', request.statusText);  
  52.            }  
  53.          };  
  54.          request.send(null);  
  55.      }
  56.      updateThisProvince('pays','province');
  57. </script>
  58.  

Le résultat de la technologie AJAX est le suivant :

Vous pourrez remplacer le fichier XML de cet exemple par un fichier générer en PHP, ASP ou Perl et faire une sélection en fonction de tous les pays, en utilisant cette technique.

Voir également

Articles - Optimisation pour des sites à haut niveau de trafic

Dernière mise à jour : Mercredi, le 5 octobre 2011