IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

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


Sujet :

AJAX

  1. #1
    Invité
    Invité(e)
    Par défaut [AJAX] Listes liées Ajax : XMLHttpRequest ou Jquery ?
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    }
    ?>
    Dernière modification par Invité ; 27/08/2011 à 13h35.

  2. #2
    Expert éminent
    Avatar de kdmbella
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2010
    Messages
    799
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Août 2010
    Messages : 799
    Points : 7 038
    Points
    7 038
    Par défaut
    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

  3. #3
    Expert éminent sénior
    Avatar de rawsrc
    Homme Profil pro
    Dev indep
    Inscrit en
    Mars 2004
    Messages
    6 142
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Dev indep

    Informations forums :
    Inscription : Mars 2004
    Messages : 6 142
    Points : 16 545
    Points
    16 545
    Billets dans le blog
    12
    Par défaut
    Bonjour,
    Citation Envoyé par jreaux62 Voir le message
    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 Voir le message
    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 Voir le message
    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 , il me semble qu'un petit framework js est de nos jours indispensable.

  4. #4
    Invité
    Invité(e)
    Par défaut
    Merci pour ces commentaires qui éclairent ma lanterne et confirment mes premières impressions.

  5. #5
    Membre régulier
    Homme Profil pro
    Inscrit en
    Octobre 2004
    Messages
    514
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : Belgique

    Informations forums :
    Inscription : Octobre 2004
    Messages : 514
    Points : 107
    Points
    107
    Par défaut
    bonjour plus simple avec un switch

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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>';
     
    }
    ?>

  6. #6
    Membre régulier
    Homme Profil pro
    Inscrit en
    Octobre 2004
    Messages
    514
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : Belgique

    Informations forums :
    Inscription : Octobre 2004
    Messages : 514
    Points : 107
    Points
    107
    Par défaut
    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

Discussions similaires

  1. [AJAX] Liste liées Ajax
    Par darkterreur dans le forum AJAX
    Réponses: 32
    Dernier message: 18/05/2011, 12h41
  2. Réponses: 3
    Dernier message: 15/11/2010, 14h57
  3. Réponses: 19
    Dernier message: 08/06/2010, 10h22
  4. [AJAX] Liste liées Ajax
    Par Invité dans le forum AJAX
    Réponses: 52
    Dernier message: 06/04/2010, 12h14
  5. [AJAX] liste liée ajax: s'iou plait, cherchez l'erreur
    Par redwire dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 19/09/2006, 21h26

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo