[AJAX] Listes liées Ajax : XMLHttpRequest ou Jquery ?

Version imprimable

Bonjour,
la question des listes liées revient souvent sur le forum.

1/ Quelle méthode privilégier/proposer/utiliser/conseiller ?
-> Ajax / XMLHttpRequest ?
-> Ajax / Jquery ?

2/ (Ajax / Jquery) va-t-il remplacer (Ajax / XMLHttpRequest) ?

3/ Si non, sur quels critères choisir l'une ou l'autre méthode ?

ps : les exemples ci-après fonctionnent très bien.

Exemple -> Ajax / XMLHttpRequest :
listeslieesXhr-test.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 	<title>Listes liées : Ajax - XMLHttpRequest</title>
 
	<script type="text/javascript">
	/* Initialisation XMLHttpRequest */
	function getXhr(){
		var xhr = null; 
		if(window.XMLHttpRequest) // Firefox et autres
		   xhr = new XMLHttpRequest(); 
		else if(window.ActiveXObject){ // Internet Explorer 
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else { // XMLHttpRequest non supporté par le navigateur 
			alert ("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
			xhr = false; 
		} 
		return xhr;
	};
 
	/* Changer la liste 2 après choix dans la liste 1 */
	function changeList2FromList1(id_lis1,id_div2){
		var id_lis1; // valeur de l option choisie (liste 1)
		var id_div2; // id du div qu'on remplira (liste 2)
 
		var xhr = getXhr();
		xhr.onreadystatechange = function(){
			// si on a tout reçu et que le serveur est ok
			if(xhr.readyState == 4 && xhr.status == 200)
			{
				texthtml = xhr.responseText;
				// On se sert de innerHTML pour rajouter les options a la liste des "selections"
				document.getElementById(id_div2).innerHTML = texthtml;
			}
		}
		// on defini la methode (post) + le fichier de traitement + asynchrone (true)
		xhr.open("POST","listeslieesAjax-test.php",true);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		// on poste les parametres a transmettre au fichier qui fera le traitement
		xhr.send("idlist1selected="+id_lis1);
	};
	</script>
 
</head>
 
<body>
 
	<form method="post" action="fichier-de-traitement.php">
	<fieldset style="width:550px;">
		<legend>Listes liées</legend>
		<p>
			<label>Liste 1 : </label>
			<select id="ididliste1" name="idliste1" onchange="changeList2FromList1(this.options[this.selectedIndex].value,'iddivListe2');">
			<!-- on appelle la fct sur le onchange (valeur-choisie, id-du-div-à-remplir) -->
				<option value="0">Choisissez ...</option>
				<option value="1">Métiers</option>
				<option value="2">Particuliers</option>
				<option value="3">Jardins</option>
			</select>	
		</p>
		<p>
			<label>Liste 2 : </label>
			<span id="iddivListe2"><!-- c'est ici que par innerHTML AJAX va ecrire la liste 2 -->
			<!-- on peut mettre d abord une option "par defaut" : -->
			<select id="ididliste2" name="idliste2">
				<option value="0">(Choisissez d'abord dans la liste 1)</option>
			</select>
			</span>	
		<p>
			<input type="submit" name="btenvoi" value="ok" />
		</p>
	</fieldset>
	</form>
 
</body>
</html>

Exemple -> Ajax / Jquery :
listeslieesJquery-test.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 	<title>Listes liées : Ajax - Jquery</title>
 
	<!-- Script initialisation jquery -->
	<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function () {
		/* Changer la liste 2 après choix dans la liste 1 */
		$('#ididliste1').change(function () {
			var id_lis1 = $('#ididliste1 option:selected').val(); // valeur de l option choisie (liste 1)
			var id_div2 = "iddivListe2"; // id du div qu'on remplira (liste 2)
			// Ajax avec Jquery
			$.ajax({
			 type: 'POST',
			 url: 'listeslieesAjax-test.php',
			 data: 'idlist1selected='+id_lis1,
			 dataType: 'html',
			 cache: false,
			 success: function(texthtml) {
				$('#'+id_div2).html(texthtml);
				return false; // arrêt de la propagation de l'évènement dans le DOM
			 }
			});
		});
	});
	</script>
 
</head>
 
<body>
 
	<form method="post" action="fichier-de-traitement.php">
	<fieldset style="width:550px;">
		<legend>Listes liées</legend>
		<p>
			<label>Liste 1 : </label>
			<select id="ididliste1" name="idliste1">
				<option value="0">Choisissez ...</option>
				<option value="1">Métiers</option>
				<option value="2">Particuliers</option>
				<option value="3">Jardins</option>
			</select>	
		</p>
		<p>
			<label>Liste 2 : </label>
			<span id="iddivListe2"><!-- c'est ici que par innerHTML AJAX va ecrire la liste 2 -->
			<!-- on peut mettre d abord une option "par defaut" : -->
			<select id="ididliste2" name="idliste2">
				<option value="0">(Choisissez d'abord dans la liste 1)</option>
			</select>
			</span>	
		<p>
			<input type="submit" name="btenvoi" value="ok" />
		</p>
	</fieldset>
	</form>
 
</body>
</html>

listeslieesAjax-test.php (commun, si vous souhaitez tester)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?php 
// Ajax : affichage correct des accents
header('Content-Type: text/html; charset=ISO-8859-15');
// Ajax : Changer la liste 2 après choix dans la liste 1
if(isset($_POST['idlist1selected']) && is_numeric($_POST['idlist1selected']) && $_POST['idlist1selected']!=0)
{
 
        // recuperation de id_liste1
        $id_liste1_selected = intval($_POST['idlist1selected']);
?>
			<select id="id_selection" name="selection">
				<option value="0">Choisissez ...</option>
<?php if ($id_liste1_selected == 1) { ?>
				<option value="1">Boulanger</option>
				<option value="2">Plombier</option>
				<option value="3">Electricien</option>
<?php } elseif ($id_liste1_selected == 2) { ?>
				<option value="4">Vente Maisons</option>
				<option value="5">Locations Maisons</option>
<?php } elseif ($id_liste1_selected == 3) { ?>
				<option value="6">Entretien jardin</option>
				<option value="7">Pavage terrasse</option>
<?php } ?>
			</select>
<?php
} else {        // SI PAS de liste 1 choisie (0) ou erreur : on remet le select "par defaut" :
?>
			<select id="ididliste2" name="idliste2">
				<option value="0">(Choisissez d'abord dans la liste 1)</option>
			</select>
<?php
}
?>

27/08/2011, 13h39
kdmbella

jquery c'est juste un framework JS si tu le maitrises tu peut l'utiliser car il intègre l'objet XmlHttpRequest mais tu peux aussi faire du javascript natif et c'est plus ou moins équivalent donc tout dépend de toi et de ta maitrise que tu as du JS ou de Jquery :utilise ce que tu maîtrise le mieux c'est ça la meilleur solution à mon avis :ccool:
29/08/2011, 20h19
rawsrc

Bonjour,

Citation:

Envoyé par jreaux62

1/ Quelle méthode privilégier/proposer/utiliser/conseiller ?
-> Ajax / XMLHttpRequest ?
-> Ajax / Jquery ?

Ca dépend de plusieurs paramètres :

1. Volume des appels ajax
Si tu te cantonnes à 2 ou 3 appels ajax, il est évident qu'un code js natif sera suffisant, pas besoin d'un framework comme jQuery.

2. Compatibilité avec les navigateurs
Là c'est déjà plus subtil, bien que les navigateurs aient tendance depuis un certain temps à respecter de plus en plus les normes, il subsiste toutefois certaines différences. Un framework comme jQuery s'occupe de gérer ces différences pour toi et "généralement", un code jQuery produira le même résultat quelque soit le navigateur. C'est un argument de poids en faveur de n'importe quel framework. Vu le nombre de navigateurs disponibles et leurs différentes versions, il est évident qu'un jour ou l'autre, tu vas forcément tomber sur un cas particulier. Et là, il n'y a pas 36 soluces, soit tu t'y colles, soit tu fais confiance à un framework.

3. Modularité et écosystème
Un autre argument en faveur d'un framework, c'est son écosytème. Occupant la place des fondations dans toute architecture logicielle, un framework permet un nombre illimités de développements très variés "généralement" compatibles entre eux pourvu qu'ils soient tous bâtis sur la même version du framework. Quand tu regardes le nombre de plugins qui sont disponibles autour de jQuery, il me parait impossible de ne pas y trouver son bonheur. Dans cette optique tu peux très bien composer toi-même un bundle ne contenant que ce dont tu as besoin. Et en dernier recours, il t'est tout à fait possible de partir d'un plugin existant et de le personnaliser sans avoir tout à te retaper. Bref, l'aspect dynamique et surtout la rapidité de développement s'en trouveront grandement améliorés. Et puis, à terme tu vas finir par factoriser tes sources js et finalement te rapprocher d'un framework maison.
Moi j'avais commencé et puis j'ai jété l'éponge, cela ne sert à rien. Autant attaquer directement un framework établi et très performant.

Citation:

Envoyé par jreaux62

2/ (Ajax / Jquery) va-t-il remplacer (Ajax / XMLHttpRequest) ?

Avis personnel :
Franchement, même si tout n'est pas parfait, je pense que cela serait profitable. Ne serait-ce que le système des sélecteurs, cela serait génial.
Je trouve aussi qu'on y gagnerait en lisibilité. Il n'y a qu'à comparer tes 2 sources.

Citation:

Envoyé par jreaux62

3/ Si non, sur quels critères choisir l'une ou l'autre méthode ?

Bah c'est très simple, l'avenir est déjà tout tracé : RIA (Rich Internet Application) en natif et sans plugin. Donc des frameworks comme jQuery, Dojo, MooTools, Prototype, extjs ou yui (j'en oublie) ne sont qu'au début de leur règne.
Personnellement, j'utilise massivement ajax pour tous mes développement. D'ailleurs, pour tout dire, je ne charge qu'une seule et unique page : la page d'accueil et après ce n'est plus qu'ajax.
Je surf de plus en plus en mode plein écran sans utiliser les boutons précédents et suivant donc l'ergonomie et la rapidité de chargement sont très importantes. Les sites qui ne fonctionnent que par pages ont tendance à me gonfler (sacro-saint nombre de pages vues, tu peux aussi très bien filtrer et compter le nombre de requêtes traitées, mais bon).

A mon avis la tendance va dans le bon sens, donc à moins d'écrire ton site à la machine à écrire :aie:, il me semble qu'un petit framework js est de nos jours indispensable.
30/08/2011, 14h00
Invité

Merci pour ces commentaires qui éclairent ma lanterne et confirment mes premières impressions. :ccool:

bonjour plus simple avec un switch

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<?php 
// Ajax : affichage correct des accents
header('Content-Type: text/html; charset=ISO-8859-15');
// Ajax : Changer la liste 2 après choix dans la liste 1
if(isset($_POST['idlist1selected']) && is_numeric($_POST['idlist1selected']) && $_POST['idlist1selected']!=0)
{ 
        // recuperation de id_liste1
        $id_liste1_selected = intval($_POST['idlist1selected']);
 
switch ($id_liste1_selected) {
         case 0;
         echo'<select id="id_selection" name="selection">
                  <option value="0">Choisissez ...</option>';
         break;
         
         case 1;
         echo'<option value="1">Aartselaar</option>
                  <option value="2">Anvers</option>
                  <option value="3">Arendonk</option>
                  <option value="4">Baarle-Hertog</option>
                  <option value="5">Balen</option>
                  <option value="6">Beerse</option>
                  <option value="7">Berlaar</option>
                  <option value="8">Boechout</option>
                  <option value="9">Bonheiden</option>
                  <option value="10">Boom</option>
                  <option value="11">Bornem</option>
                  <option value="12">Borsbeek</option>
                  <option value="13">Brasschaat</option>
                  <option value="14">Brecht</option>
                  <option value="15">Dessel</option>
                  <option value="16">Duffel</option>
                  <option value="17">Edegem</option>
                  <option value="18">Essen</option>
                  <option value="19">Geel</option>
                  <option value="20">Grobbendonk</option>
                  <option value="21">Heist-op-den-Berg</option>
                  <option value="22">Hemiksem</option>
                  <option value="23">Herentals</option>
                  <option value="24">Herenthout</option>
                  <option value="25">Herselt</option>
                  <option value="26">Hoogstraten</option>
                  <option value="27">Hove</option>
                  <option value="28">Hulshout</option>
                  <option value="29">Kalmthout</option>
                  <option value="30">Kapellen</option>
                  <option value="31">Kasterlee</option>
                  <option value="32">Kontich</option>
                  <option value="33">Laakdal</option>
                  <option value="34">Lier</option>
                  <option value="35">Lille</option>
                  <option value="36">Lint</option>
                  </select>'; 
         break;
         
         case 2;
         echo'<option value="4">Vente Maisons</option>
                  <option value="5">Locations Maisons</option>';
         break;
         
         case 3;
         echo'<option value="6">Entretien jardin</option>
                  <option value="7">Pavage terrasse</option>';
         break;
     }
      
     } 
         else 
         {      // SI PAS de liste 1 choisie (0) ou erreur : on remet le select "par defaut" :
 
         echo'<select id="ididliste2" name="idliste2">
                  <option value="0">(Choisissez d&acute;abord dans la liste 1)</option>
                  </select>';
 
}
?>

14/10/2011, 21h16
speedylol

Bonjour, suivant ton script j'ai ajouter un switch cela va super quand tu choisi la province en liste 1 le soucis c'est les villes elles ne s'ajoute pas dans un select ou liste déroulante snifff ???

tu a une solutions