[AJAX] Requêtes dans le Javascript

**ninikkhuet** · 08/06/2010, 09h42

Bonjour,

j'ai récupéré une application qui est vraiment trop bizarre, ou du moins, je n'avais jamais vu ce fonctionnement auparavant : quasiment tout le code de l'application est dans le JavaScript. Prenons par exemple la page d'accueil, qui est composée d'une frame, dont la source est un fichier HTML, qui contient uniquement 2 lignes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<script type="text/javascript" src="/Javascript/Global.js"></script>
<script type="text/javascript" src="/Init.js"></script>

Enfin, dans Init.js, j'ai ceci :

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
//Demande d'habilitation si l'utilisateur n'est pas identifié
if (F_Get("ID") != "" && F_Get("MP") != "") {
	if (F_Get("HA") != "") {
		var Requete = "SELECT ";
		Requete += "Code, Entite ";
		Requete += "FROM Habilitations ";
		Requete += "WHERE ";
		Requete += "Code = '" + F_Get("Code") + "' AND ";
		Requete += "Identifiant = '" + F_Get("ID") + "' AND ";
		Requete += "MotDePasse = '" + F_Get("MP") + "' ";
		var IdentifiantXml = F_Sjax(Requete);
		if (IdentifiantXml.getElementsByTagName("Data")[0].firstChild != null) {
			parent.Session.Identifiant.value = F_Get("ID");
			parent.Session.Entite.value = IdentifiantXml.getElementsByTagName("Entite")[0].firstChild.data;
			F_PageCharger("FO-SI-002",F_Get("Code"));
		}else{
			parent.Menu.window.location = "/Html/Menu.html";
		}//end if
	}else{
		var Requete = "SELECT ";
		Requete += "Code, Entite ";
		Requete += "FROM Habilitations ";
		Requete += "WHERE ";
		Requete += "Identifiant = '" + F_Get("ID") + "' AND ";
		Requete += "MotDePasse = '" + F_Get("MP") + "' ";
		var IdentifiantXml = F_Sjax(Requete);
		if (IdentifiantXml.getElementsByTagName("Data")[0].firstChild != null) {
			parent.Session.Identifiant.value = F_Get("ID");
			parent.Session.Entite.value = IdentifiantXml.getElementsByTagName("Entite")[0].firstChild.data;
			parent.Menu.window.location = "/Html/Menu.html";
		}else{
			parent.Menu.window.location = "/Html/Menu.html";
		}//end if
	}//end if
}else{
	parent.Menu.window.location = "/Html/Menu.html";
}//end if

Voici le code des différentes fonctions utilisées ci-dessus :

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
function F_Get(Parametre) {
    // Suppression du point d'interrogation
    var ListeParametres = window.location.search.slice(1,window.location.search.length);
    // Séparation des parametres
    var Parametres = ListeParametres.split("&");
    var Valeur = "";
    for(i=0;i<Parametres.length;i++){
    	if (Parametres[i].split("=")[0] == Parametre) Valeur = Parametres[i].substr(Parametres[i].search(/=/)+1);
    }//end for
    return(Valeur);
}//end function
 
function F_Sjax(Requete,Domaine) {
	if (typeof Domaine == "undefined") var Domaine = document.domain;
	if (Domaine == "localhost") var Domaine = F_Ini("localhost");	
	if (Domaine == "Production") var Domaine = F_Ini("Production");
	if (Domaine == "PreProduction") var Domaine = F_Ini("PreProduction");
	var BoucleRequête = true;
	//Boucle pour absorber les erreurs 500
	while (BoucleRequête) {
		var xhr = new ActiveXObject("Microsoft.XMLHTTP");
		xhr.open("POST","http://" + Domaine + "/Php/Ajax.php",false);
		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xhr.send("Requete=" + Requete);
		if (xhr.responseText.indexOf("Network Error (tcp_error)") > 0) {
			xhr.close;
		}else{
			BoucleRequête = false;
		}//end if
	}//end while
	return(xhr.responseXML);
}//end function
 
function F_PageCharger(Page,Parametre) {
	if (Page == null) {
		parent.Page.window.location = "/Html/Blanc.html";
	}else{
		switch (Page.substr(0,2)) {
			case "F_": F_Fonction(Page,Parametre);break;
			case "FO": F_Formulaire(Page,Parametre);break;
			case "ET": F_Etat(Page,Parametre);break;
			case "LI": F_Liste(Page,Parametre);break;
			case "PL": F_Planning(Page,Parametre);break;
			case "GR": F_Graphe(Page,Parametre);break;
			default : F_Script(Page,Parametre);break;
		}//end switch
	}//end if
}//end function

Le fichier Ajax.php, qui permet de construire un XML à partir des résultats d'une requête SQL :

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
header ('Content-type: text/xml');
include_once ($_SERVER["DOCUMENT_ROOT"]."/Classes/ClasseMappingSGBD.php");
 
$Requete = html_entity_decode(utf8_decode(stripslashes($_POST["Requete"])));
 
$Bdd = new MappingSGBD();
$Bdd->Connexion();
$Resultat = $Bdd->TableauDonnees($Requete);
 
//************* CREATION DU FICHIER XML 
echo "<?xml version=\"1.0\" encoding=\"ISO-8859-1\" ?>\n";
if ($Resultat == "1") {
	echo "<ResultatOk></ResultatOk>\n";
}else{
	if ($Bdd->Erreur()) {
		echo "<Erreur>".$Bdd->Erreur()."</Erreur>\n";
	}else{
		echo "<Data>\n";
		foreach ($Resultat as $Enregistrement) {
			echo "<Item>\n";
			for($i=0 ; $i < $Enregistrement->NombreLignes() ; $i++){
				$Code =   $Enregistrement->GetNomChamp($i);
				if ($Enregistrement->GetDonnee($Code) != null) {
					$Valeur = "<![CDATA[".$Enregistrement->GetDonnee($Code)."]]>";
				}else{
					$Valeur = "";
				}//end if
//				echo "<".htmlspecialchars($Code).">".htmlspecialchars($Valeur)."</".$Code.">";
				//$logger->info($Valeur);
				echo "<".$Code.">".$Valeur."</".$Code.">";
			}//end for
			echo "</Item>\n";
		}//end foreach
		echo "</Data>\n";
	}//end if
}//end if

Donc quasiment toutes les requêtes SQL sont exécutées dans le code JavaScript

...Ce n'est pas normal non ? Qu'est-ce que vous en pensez ?

**E.Bzz** · 08/06/2010, 09h47

Bonjour,
il s'agit visiblement d'un site "full Ajax".

Je de déconseille de t'inspirer de ce principe : ça peut paraître très "user-friendly" (quand ça marche), mais ce n'est pas du tout "developer-friendly"

Mieux vaut garder la solution Ajax pour un usage ponctuel, quand il y en a vraiment besoin (et là, ça devient très efficace)

A+

**ninikkhuet** · 08/06/2010, 09h56

eh bien je ne trouve même pas ça "user-friendly". Il y a par exemple des pages où il y a un formulaire dans lequel les listes (déroulantes etc..) sont remplis au fur et à mesure en Ajax. Donc lorsqu'on arrive sur la page, tout est vide

Ensuite c'est clair que ce n'est pas du tout "developer-friendly" comme tu dis

Impossible de se retrouver dans le code, je n'arrive pas à debugger non plus..c'est l'enfer à maintenir !!

Autre chose, j'ai lu quelque part que ça craignait (niveau sécurité) d'exécuter les requêtes dans le JavaScript..Quelqu'un pourrait-il m'expliquer exactement pourquoi ?

Thx

**E.Bzz** · 08/06/2010, 10h06

Envoyé par ninikkhuet

Autre chose, j'ai lu quelque part que ça craignait (niveau sécurité) d'exécuter les requêtes dans le JavaScript..Quelqu'un pourrait-il m'expliquer exactement pourquoi ?

Heu ... oui effectivement, "ça craint" ... car ce n'est pas possible

Ce n'est pas parce que tu vois le code SQL dans un .js qu'il est "exécuté" par JavaScript.
Ce code est bien exécuté sur le serveur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var IdentifiantXml = F_Sjax(Requete);

Il est apparemment passé en argument à la requête Ajax, qui l'exécute et renvoie la réponse.
(ce qui constitue, au passage, une sorte de coup de pied retourné dans la face de l'architecture 3 tiers

).

Bref, il y a aussi moyen de faire de l'Ajax proprement, rassures-toi

(il te faut juste changer de source d'inspiration ...)

A+

**SpaceFrog** · 08/06/2010, 10h06

générer le string de requete coté client est sans doute une des pires chose à faire ...
C'est en effet donner beaucoup trop d'informations sur la structure des tables,et donc une porte ouverte !!!

**andry.aime** · 09/06/2010, 08h04

Bonjour,
Devines seulement si l'utilisateur modifie la requête par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var Requete ="TRUNCATE TABLE Habilitations";

Ou pire encore un DROP, vous allez

et envie de

quelqu'un

Ce que vous devez faire c'est envoyé seulement les valeurs des résultats de fonction F_Get("ID")... dans des variables et reconstitué la requête du coté serveur. Vous pouvez s'inspirer de ce tutoriel.

A+.

**E.Bzz** · 09/06/2010, 09h29

Envoyé par ninikkhuet

j'ai récupéré une application

@ninikkhuet > Pour nous aider à comprendre ton problème : est-ce une application écrite par un collègue et que tu "récupères" pour y faire des modifications, ou seulement un script trouvé sur internet dont tu veux t'inspirer pour te mettre à Ajax ?

A+

**ninikkhuet** · 09/06/2010, 10h50

Bonjour,

1ère solution : application écrite par un collègue et que tu "récupères" pour y faire des modifications

**E.Bzz** · 09/06/2010, 11h00

Envoyé par ninikkhuet

1ère solution : application écrite par un collègue et que tu "récupères" pour y faire des modifications

Arf !
C'était la mauvaise réponse

Et il a laissé une doc un peu plus conséquente que les 3 commentaires dans le code ?

(j'ai comme un mauvais pressentiment sur la réponse)

Si c'était de la prestation, commence à sensibiliser les personnes concernées au fait qu'il faudra peut être une rallonge pour une nouvelle intervention

Sinon, j'espère que les modif que tu as à faire sont légères et qu'elles n'ont que peu ou pas d'impact avec l'existant

A+

**ninikkhuet** · 09/06/2010, 11h15

Non aucune doc

Sinon, j'espère que les modif que tu as à faire sont légères et qu'elles n'ont que peu ou pas d'impact avec l'existant

Bah de toutes façons, je n'ai pas le choix va falloir que je me fasses à l'existant

je sens que je vais m'arracher les cheveux

**E.Bzz** · 09/06/2010, 12h04

Envoyé par ninikkhuet

Bah de toutes façons, je n'ai pas le choix va falloir que je me fasses à l'existant

je sens que je vais m'arracher les cheveux

Prends bien le temps de comprendre d'abord la "logique" de fonctionnement de l'ensemble, puis de chaque page, avant de toucher quoi que ce soit

(et, en plus de tes modif, une des priorités serait de repasser la totalité du SQL côté serveur, comme déjà indiqué) ...

A+

[AJAX] Requêtes dans le Javascript

AJAX

Discussions similaires

Partager

Partager