[Prototype] classe AJAX perso

[loacast]

Salut !

J'ai voulu me faire une classe ajax toute simpliste, mais voilà ça ne fonctionne pas !

Mais trêve de plaisanterie voici la classe (intéressez-vous à la fonction handleAjaxText) :

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
/*
 
Classe : C_Ajax
méthodes :
	° getObjectAjax(  ) // returne un objet ajax
	° handleAjaxText( objAjax, chaine identifiant div à remplir )
	° handleAjaxXML( objAjax) // returne instanceXML
	° sendAjax(  objAjax, lienPage, chaine des données à envoyer, type méthode)
 
*/
 
function C_Ajax() {
 
	this.getObjectAjax = getObjectAjax;
	this.handleAjaxText = handleAjaxText;
	this.getHandleAjaxXML = getHandleAjaxXML;
	this.sendAjax = sendAjax;
}
 
	// Récupère l'instance de l'objet ajax
function getObjectAjax() {
 
	objAjax = null;
 
	try { // Firefox et autres
 
		objAjax = new XMLHttpRequest();
	}
	catch (e) { // Internet Explorer 5, 5.5 et 6
 
		try { 
 
			objAjax = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e) {
 
			try {
 
				objAjax= new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e) { // XMLHttpRequest et ActiveXObject non supportés par le navigateur 
 
				alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				objAjax = null;
			}
		}
	}
	return objAjax;
}
 
	// Gestion du rendu de la page appellée
function handleAjaxText(objAjax, idElemDiv) {
 
	if (objAjax == null) {
 
		alert("Veuillez initialiser l'objet ajax");
	}
	else {
 
		elemDiv = document.getElementById(idElemDiv);
 
		index = 0;
		objAjax.onreadystatechange = function() {
 
			index++;
			alert(""+index);
				// On fait quelque chose que si on a tout reçu et que le serveur est ok
			if(objAjax.readyState == 4 && objAjax.status == 200) {
 
				reponseTexte = objAjax.responseText;
					// On insère le rendu de la page de retour dans le div en paramètre
				elemDiv.innerHTML = reponseTexte;
			}
		}
		objAjax = null;
	}
}
 
function getHandleAjaxXML(objAjax) {
 
	if (objAjax == null) {
 
		alert("Veuillez initialiser l'objet ajax");
		return null;
	}
	else {
 
		objAjax.onreadystatechange = function() {
 
			// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
			if(objAjax.readyState == 4 && objAjax.status == 200) {
 
					// On ne fait pas de manipulation de l'objet renvoyé
					// Il sera directement manipulé par le développeur
				reponseXML = objAjax.responseXML;
				objAjax = null;
				return reponseXML;
			}
		}
	}
}
 
	// Appel AJAX de la page en paramètre
function sendAjax(objAjax, page, strDataSend, method) {
 
	if (objAjax == null) {
 
		alert("Veuillez initialiser l'objet ajax");
	}
	else {
 
		if (method == 'GET') {
 
			if (strDataSend != '') {
 
				objAjax.open('GET', ''+page+'?'+strDataSend, true);
			}
			else {
 
				objAjax.open('GET', ''+page, true);
			}
			objAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			objAjax.send(null);
		}
		else if (method == 'POST') {
 
			if (strDataSend != '') {
 
				objAjax.open('POST', ''+page+'?'+strDataSend, true);
			}
			else {
 
				objAjax.open('POST', ''+page, true);
			}
 
			objAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			objAjax.send(strDataSend);
		}
		else {
 
			alert("méthode incorrecte");
		}
	}
}

Suivit de la page qui s'en sert (intéressez vous à la fonction genererListeProduits():

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<?php 
 
	session_start();
 
		// Connexion à la base de données
	mysql_connect("localhost", "root", "") or die(mysql_error());
	mysql_select_db("boutiqueajax") or die(mysql_error());
 
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 
	<script language="JavaScript" src="C_Ajax.js"></script>
	<script language="JavaScript">
 
		var elemListeCategories;
 
			/* Initialise les variables et objets
			*   Gestion cas particulier : La base de données n'a renvoyé aucune catégorie
			*   	° select catégorie : On ajoute une balise option avec id = -1 et valeur = Aucune catégorie
			*	° select produit : On crée le select dont l'option a id = -1 et valeur = Aucune catégorie sélectionnée
			*/
		function init() {
 
				// objets DOM
			elemDivProduits = document.getElementById('listeProduits');
			elemListeCategories = document.forms.frmCatProduit.categorie;
 
				// Nombre de catégories
			nbProduits = elemListeCategories.options.length;
 
				// Si il n'y a pas de catégories alors
			if ( nbProduits == 0 ) { 
 
				elemListeCategories.options[0] = new Option('Aucune catégorie', '-1', true, true);
				elemDivProduits.innerHTML = "<select name='produit' id='produit'><option value='-1'>Aucune catégorie sélectionnée</option></select>";
 
			}
			else { // Si il y'a une ou plusieurs catégories
 
				genererListeProduits();
			}			
		}
 
			// Création de la liste déroulante des produits
		function genererListeProduits() {
 
				// Pour faire patienter le visiteur
			elemDivProduits = document.getElementById('listeProduits');
			elemDivProduits.innerHTML = "<select name='produit' id='produit'><option value='-1'>En traitement ...</option></select>";
 
				// On récupère l'identifiant de la catégorie
			idCategorie = elemListeCategories.options[elemListeCategories.selectedIndex].value;
 
				// Générer par ajax une liste déroulante de produits
			objC_Ajax = new C_Ajax();
 
			objAjax = objC_Ajax.getObjectAjax();
 
			objC_Ajax.sendAjax(objAjax, 'liste_deroulante_produits.php', 'idCategorie='+idCategorie, 'GET');
			objC_Ajax.handleAjaxText(objAjax, 'listeProduits');
		}
 
			/***************************/
 
		function afficherProduit() {
			//elemDivDescriptifProduit
 
		}
 
	</script>
	<title>boutique en AJAX</title>
 
</head>
 
<body onload="init()">
 
	<form name="frmCatProduit">
 
		<select name="categorie" id="categorie" onchange="selectionCategorie()" >
 
			<?php
 
					// On remplit le champ déroulant des catégories de produits
				$sql = "SELECT id, libelle FROM categorie";
				$resultatRequete = mysql_query($sql) or die(__LINE__.mysql_error().$sql);
				$indexCategorie = 0;
 
				while ($ligneResultat = mysql_fetch_object($resultatRequete)) {
 
					if ( $indexCategorie == 0 ) {
 
						echo "<option selected value=\"".$ligneResultat->id."\">".$ligneResultat->libelle."</option>
						";
						$indexCategorie++;
					}
					else {
 
						echo "<option value=\"".$ligneResultat->id."\">".$ligneResultat->libelle."</option>
						";
					}
				}
 
			?>
 
		</select>
 
		<div id="listeProduits">
 
		</div>
 
		<input type="button" value="afficher" onclick="afficherProduit();" />
 
	</form>
 
	<div>
 
	</div>
 
</body>
 
</html>
<?php mysql_close(); ?>

Je ne comprend pas le problème. J'ai essayé aussi avec des méthodes de type prototype sans aucune altération du problème.

Si vous voulez des précisions ou le fichier manquant ainsi que la base de données n'hésitez pas à me demander.


Petite remarque : ne me proposez pas d'utiliser un framework, j'en utilise déjà, cette classe c'est juste pour le fun.


En tout cas merci d'avoir pris le temps de vous intéresser à mon code