A votre avis : quelle est la meilleure solution ?

[tavarlindar]

Bonjour,
Voilà, dans le cadre d’une application « AJAX » , je me pose la question de savoir quelle est la meilleure approche entre les 2 solutions suivantes :
Principe :
J’ai une liste déroulante de catégories. Une fois qu’on sélectionne une catégorie, elle met à jour une seconde liste déroulante des produits correspondants. Je n’utilise pas XML. J’envoie une requête au serveur qui me répond via une réponse text.
Pour ce faire au niveau du script serveur (php) j’ai 2 approches possibles
Approche 1 approche1
Je génère le code html de toute la liste déroulante (liste fille = liste des produits) et je la renvoie à ma page principale. Là je la récupère et je remplace ma liste déroulante ( fille ) par la réponse du serveur via un innerHTML.
Code serveur

<?php
header("Cache-Control: no-cache, must-revalidate");
header('Content-Type: text/plain; charset=ISO-8859-1');
//Parmètrage connexion à la base
require_once ("include/ParametresConnexion.php");
$db = mysql_connect(SERVEUR, NOM,PASSE) or die(mysql_error());
mysql_select_db(BASE,$db) or die(mysql_error());

$req=mysql_query('select * from produit where pr_categorie='.$_POST['categorieID']);
echo "<select name='produits'>";
while($pdt=mysql_fetch_assoc($req))
{
echo "<option value='".$pdt['pr_id']."'>".$pdt['pr_libelle']."</option>";
}
echo '</select>';

mysql_close($cnx);
?>

Approche 2 : approche2
je génère uniquement le code des options qui constitue la liste déroulante. Une fois récupéré dans la page principale, via une succession de split, je mets à jour ma liste déroulante fille.

require_once ("include/ParametresConnexion.php");
$db = mysql_connect(SERVEUR, NOM,PASSE) or die(mysql_error());
mysql_select_db(BASE,$db) or die(mysql_error());

$req=mysql_query('select * from produit where pr_categorie='.$_POST['categorieID']);
$pdt=mysql_fetch_assoc($req);
if ($pdt)
{
$resultat=$pdt['pr_id'].'*'.$pdt['pr_libelle'];
$pdt=mysql_fetch_assoc($req);
}
else
{
$resultat='';
}
while($pdt)
{
$resultat=$resultat.'/'.$pdt['pr_id'].'*'.$pdt['pr_libelle'];
$pdt=mysql_fetch_assoc($req);
}

mysql_close($cnx);
echo $resultat;

Pour voir le code complet, il suffit de faire affiche code source sur les 2 pages de test
Si le résultat est le même, je me pose quand même la question de savoir si l’une ou l’autre méthode est meilleure.
Je pense notamment au faite que si je dois afficher des infos relatives au produit une fois sélectionné le produit dans la seconde liste déroulante, la 2ème approche est plus souple. En effet; dans ce cas là, le code côté serveur est plus simple, pas besoin de penser à toutes les infos qui devront être affichées. Il y a un meilleur découpage du code. On ne génére que ce qui change. voir Exemple

Quand pensez-vous ?

[Herode]

Envoyé par tavarlindar

la 2ème approche est plus souple. En effet; dans ce cas là, le code côté serveur est plus simple, pas besoin de penser à toutes les infos qui devront être affichées. Il y a un meilleur découpage du code. On ne génére que ce qui change.

De mon point de vue, cela répond très bien à ta question

L'avantage de la solution 1 est qu'elle est simple à écrire. Pour une petite page perso, un exercice de cours ou un site web peu évolutif, cela peut suffire. Elle présente un gros inconvénient : la gestion de la Vue et celle du Modèle sont imbriquées. Je déconseille cela pour un site pro, un appli web d'entreprise ou quelque projet d'envergure moyenne ou grosse.

La solution 2 est bien découplée. Elle sera plus facile à maintenir si la structure des données - ou de la mise en page - change. Cela dit, ce que tu fais là est de structurer tes données en mode texte selon un format qui t'est propre, puis de les analyser côté client (avec des fonctions de manipulation de chaînes dans ce cas). Or, pour l'échange de données structurées, il existe un 'langage' conçu tout exprès : XML. Dans le cas précis que tu cites - 2 champs à manipuler seulement - ça ne pose pas de problème, utiliser responseText est assez simple et clair. Mais dans le cas que tu cites, la solution 1 ne pose pas de problème non plus. Par contre, si d'aventure les choses étaient amenées à se complexifier un peu, le recours à XML pourrait être aussi intéressant, du point de vue de la robustesse du code et de son évolutivité, que le recours au découplage Vue/Modèle que tu utilises en 2.

[tavarlindar]

Merci Herode pour ta réponse,

Je te rejoins et grâce à toi, je prends conscience qu'il serait souhaitable de passer au XML ....
mais ça complique le code au départ et surtout cela nécessite du temps pour apprendre XML.

Ta réponse me conforte dans l'idée que quitte à mal développer autant le faire avec la solution 2 pour répondre à de simples besoins.
XML étant plus évolutif car plus normé (en fin j'imagine).

Merci encore pour ta réponse : ton post me set et va me servir par la suite , le courage d'apprendre xml.

Bien à toi

Tavar

[DoubleU]

Je suis du même avis qu'Herode.

Xml est vraiment la solution la plus claire pour échanger des informations entre client et serveur puisque finalement c'est juste un formalisme pour présenter tes données, après libre à toi coté client de les traiter de la façon dont tu as besoin.

Au niveau du code serveur, ca va d'aussi simple à mettre en œuvre que dans ta première solution si tu crées ton arbre xml avec des echos (pour les utilisations basiques) à à peine plus complexe si tu utilises une api dédiée (pour les utilisations un peu plus avancées).

La où c'est plus compliqué si tu débutes, c'est au niveau du traitement en javascript parce que les méthodes dédiées à la manipulation de xml sont vraiment bordéliques et pas intuitives pour un sou. Néanmoins, une fois que t'as pris le truc en main, tu peux vraiment en faire ce que tu veux avec.

L'autre intérêt pour toi, c'est que si tu connais pas le xml, c'est vraiment l'occasion d'apprendre, parce que ca te sera toujours utile à un moment ou à un autre.

[Eric Berger]

+1

Il faut un peu de temps pour s'y mettre mais si tu envisages une utilisation fréquente d'ajax, au final tu gagnera en temps et en clarté.

[alain.couthures]

Pour des manipulations Javascript, JSON est moins riche mais plus facile à manipuler que le XML.

On y retrouve l'évolutivité du XML...

Le XML est vraiment pratique lorsque l'on a à faire des transformations et, là, on utilise XSLT. Mais est-ce vraiment le besoin pour de l'AJAX ? C'est plutôt du côté de XForms qu'il faut regarder pour avoir une bonne solution d'utilisation naturelle (pas besoin de Javascript !) d'échanges XML entre le client et le serveur.