[AJAX] AJAX Asynchrone ne fonctionne pas

Version imprimable

Voir 40 message(s) de cette discussion en une page

21/08/2006, 14h18
linar009

[AJAX] AJAX Asynchrone ne fonctionne pas
Bonjour,

J'ai un petit souci avec AJAX :
Lorsque j'envoie ma requête HTTP en mode synchrone, il n'y a aucun problème. Par contre, lorsque je souhaite envoyer en mode asynchrone, le navigateur me dit :
Les données nécessaires pour terminer l'opération ne sont pas encore disponibles

Vu que la requête SQL que j'ai à faire est assez longue, ça nuit beaucoup à la fluidité.
Code:

1 2 3 var xhr=getXhr(); xhr.open("GET","../../includes/bd_action.php?act=delPlanif&addsupIdOrg=" + id_org + "&addsupPlanSeq=" + plan_seq + "&addsupDate=" + pd, false); xhr.send(null);
==> Ca marche !
Code:

1 2 3 var xhr=getXhr(); xhr.open("GET","../../includes/bd_action.php?act=delPlanif&addsupIdOrg=" + id_org + "&addsupPlanSeq=" + plan_seq + "&addsupDate=" + pd, true); xhr.send(null);
==> Les données nécessaires pour terminer l'opération ne sont pas encore disponibles

Merci
21/08/2006, 14h27
ldcarpathes

tu peut nous montrer le code qui recupere les donnees ...
merci

Je pense que tu parles du code PHP côté serveur :

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
if ($_GET["act"]='delPlanif') {
 
$planDate = substr($_GET["addsupDate"],0,4) . "-" . substr($_GET["addsupDate"],4,2) . "-" . substr($_GET["addsupDate"],6,2);
$link = pg_connect($conn_string) 
	or die("Connexion Impossible! ");
 
	$req = "SELECT id FROM T_p ";
	$req .= "WHERE plan_seq =" . $_GET["addsupPlanSeq"] . " AND id_org = '" . $_GET["addsupIdOrg"] . "' ";
	$result = pg_query($link,$req);
	$line = pg_fetch_array($result);
	$id_trait_org = $line[0];
 
   $sql  = "UPDATE T_p ";
   $sql .= "SET plan_status = 5, plan_histo = '' ";
   $sql .= "WHERE id_trait_org=" . $id_trait_org .";";
   $res = pg_query($link,$sql);
 
   $sql2  = "SELECT trait_nom, plan_ord_day, trait_lib, freq_type ";
   $sql2 .= "FROM T_traitements, T_trait_org, T_planif ";
   $sql2 .= "WHERE T_traitements.id_trait = T_trait_org.id_trait ";
   $sql2 .= "AND T_planif.id_trait_org = T_trait_org.id_trait_org ";
   $sql2 .= "AND T_planif.plan_seq = " . $_GET["addsupPlanSeq"] . "; ";   
   $nomPos = pg_fetch_array(pg_query($link,$sql2));
 
   $sql3  = "UPDATE T_planif ";
   $sql3 .= "SET plan_ord_day = plan_ord_day - 1 ";
   $sql3 .= "WHERE id_trait_org=" . $id_trait_org . " ";
   $sql3 .= "AND plan_ord_day > '" . $nomPos['plan_ord_day'] . "'; ";
   $res3 = pg_query($link,$sql3);
 
   echo $nomPos["trait_nom"] . "|" . $nomPos["trait_lib"] . "|" . $nomPos["freq_type"];
 
   pg_close();
}

Sinon si ca vous interesse, le script JS :

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
function f(id_org,plan_seq,plan_date,ligne) {
if (confirm('Etes-vous sur?'))
   {   
    var mytool_array=plan_date.split("-");
	var pd = mytool_array[0] + mytool_array[1] + mytool_array[2];		
   try {
        var xhr=getXhr();
        xhr.open("GET","../../includes/bd_action.php?act=delPlanif&addsupIdOrg=" + id_org + "&addsupPlanSeq=" + plan_seq + "&addsupDate=" + pd, true);
		xhr.send(null);        
        if(xhr.readyState == 4 && xhr.status == 200){            
			for (i=1;i<100;i++) {
				param = "b" + ligne.id + "00" + i;
				try {
					ligneParam = document.getElementById(param);
					document.getElementById('tableauPlanif').deleteRow(ligneParam.rowIndex);	
				} catch (ex) {
					break;
				}
			}		
			document.getElementById('tableauPlanif').deleteRow(ligne.rowIndex);	
			fctRefuse(xhr.responseText,plan_date,id_org,plan_seq);
			document.getElementById('nbTraitPlanif').innerHTML = "resultat : " 
+ (document.getElementById('tableauPlanif').tBodies[1].rows.length);		
        } else {
            alert("le serveur renvoie une erreur:" + xhr.responseText);
        }
    } catch (ex) {
        alert("Action impossible: " + ex.message);
    }
   }
}

Merci d'avance pour votre aide

21/08/2006, 15h12
denisC

cf : http://siddh.developpez.com/articles/ajax/#LIII

Utilise l'évenement onreadystatechange de ton objet Ajax, c'est la seule façon de faire avec l'asynchrone.
21/08/2006, 15h47
FremyCompany

Citation:

Envoyé par denisC

cf : http://siddh.developpez.com/articles/ajax/#LIII

Utilise l'évenement onreadystatechange de ton objet Ajax, c'est la seule façon de faire avec l'asynchrone.

+1

Par contre, tant qu'il y aura une faute dans le tutoriel, je préfère qu'on ne le référence pas comme solution ;)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
xhr.onreadystatechange  = function() {
 if(xhr.readyState == 4 && xhr.status == 200){            
			for (i=1;i<100;i++) {
				param = "b" + ligne.id + "00" + i;
				try {
					ligneParam = document.getElementById(param);
					document.getElementById('tableauPlanif').deleteRow(ligneParam.rowIndex);	
				} catch (ex) {
					break;
				}
			}	
 
}

Sa doit etre un truc dans le genre ...

21/08/2006, 16h00
linar009

C'est bien sympa le onreadystatechange, mais ça ne change pas grand chose finalement...
La différence c'est que le try catch ne renvoie pas d'exception (donc pas d'alert) mais dans la console javascript, ça y va méchamment...
De plus, le temps d'attente est identique.
Etes-vous sûr qu'il s'agisse de la solution au problème ?
21/08/2006, 16h03
ldcarpathes

Y a quoi comme erreur dans ta console java script
21/08/2006, 16h04
linar009

Citation:

Envoyé par ldcarpathes

Y a quoi comme erreur dans ta console java script

Les données nécessaires pour terminer l'opération ne sont pas encore disponibles
21/08/2006, 16h07
FremyCompany

Il ne doit subsister que le onreaystatechange ;)

Citation:

Envoyé par FremyCompany

Il ne doit subsister que le onreaystatechange ;)

c'est-à-dire ?

voilà ce que j'ai pour le moment :

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
function f(id_org,plan_seq,plan_date,ligne) {
if (confirm('Etes-vous sur ?'))
   {   
    var mytool_array=plan_date.split("-");
	var pd = mytool_array[0] + mytool_array[1] + mytool_array[2];		
   try {
        var xhr=getXhr();				xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){					for (i=1;i<100;i++) {
				param = "b" + ligne.id + "00" + i;
				try {
					ligneParam = document.getElementById(param);
						document.getElementById('tableauPlanif').deleteRow(ligneParam.rowIndex);	
					} catch (ex) {
						break;
					}
				}		
 
					document.getElementById('tableauPlanif').deleteRow(ligne.rowIndex);	
					try {
						fctA(responseText,plan_date,id_org,plan_seq);
					} catch (ex) {}
					document.getElementById('nbTraitPlanif').innerHTML = "s : " + (document.getElementById('tableauPlanif').tBodies[1].rows.length);		
			} else {
				alert("le serveur renvoie une erreur:" + xhr.responseText);
			}
		}
        xhr.open("GET","../../includes/bd_action.php?act=delPlanif&addsupIdOrg=" + id_org + "&addsupPlanSeq=" + plan_seq + "&addsupDate=" + pd, true);
		xhr.send(null);                
    } catch (ex) {
        alert("impossible: " + ex.message);
    }
   }
}

21/08/2006, 16h15
FremyCompany

Quelle est la ligne de l'erreur ?

Sinon, je mettrais l'instanciation de onreadystatechange après open mais avant send
21/08/2006, 16h19
denisC

Citation:

Envoyé par FremyCompany

Par contre, tant qu'il y aura une faute dans le tutoriel, je préfère qu'on ne le référence pas comme solution ;)

Il n'y aucune faute dans ce tutoriel.

La faute vient des gens qui pensent qu'on peut copier/coller le code qui fait quelque chose quelque part vers n'importe ou pour faire autre chose.
La concurrence n'est pas gérée sur l'objet XHR dans ce script, et ça serait bien de le préciser, mais ce n'est en aucun cas une erreur.
21/08/2006, 16h23
FremyCompany

Citation:

Envoyé par denisC

Il n'y aucune faute dans ce tutoriel.

La faute vient des gens qui pensent qu'on peut copier/coller le code qui fait quelque chose quelque part vers n'importe ou pour faire autre chose.
La concurrence n'est pas gérée sur l'objet XHR dans ce script, et ça serait bien de le préciser, mais ce n'est en aucun cas une erreur.

Euh, ca dépend comment tu considère une erreur....

Pour moi un déni de service est une erreur (et ici, il s'agit bien d'un déni de service, vu qu'on ne peut pas lancer plusieurs reqêtes et que ce n'est précisé nulle part)

D'ailleurs, je dois te dire qu'au moins une fois par semaine je dois corriger la faute dans le script ajax de qqun sur le forum...

Je trouve ca lourd à la fin... surtout que ca demanderait à Siddh 1 minutes tout au plus pour corriger son tuto... ou au moins prévenir que si on veut plusieurs requete, la méthode ne convient pas...

Citation:

Envoyé par FremyCompany

Quelle est la ligne de l'erreur ?

Voici la ligne de l'erreur :

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
function f(id_org,plan_seq,plan_date,ligne) {
if (confirm('Etes-vous sur ?'))
   {   
    var mytool_array=plan_date.split("-");
	var pd = mytool_array[0] + mytool_array[1] + mytool_array[2];		
   try {
        var xhr=getXhr();	
xhr.open("GET","../../includes/bd_action.php?act=delPlanif&addsupIdOrg=" + id_org + "&addsupPlanSeq=" + plan_seq + "&addsupDate=" + pd, true);			xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){					for (i=1;i<100;i++) {
				param = "b" + ligne.id + "00" + i;
				try {
					ligneParam = document.getElementById(param);
						document.getElementById('tableauPlanif').deleteRow(ligneParam.rowIndex);	
					} catch (ex) {
						break;
					}
				}		
				
					document.getElementById('tableauPlanif').deleteRow(ligne.rowIndex);	
					try {
						fctA(responseText,plan_date,id_org,plan_seq);
					} catch (ex) {}
					document.getElementById('nbTraitPlanif').innerHTML = "s : " + (document.getElementById('tableauPlanif').tBodies[1].rows.length);		
			} else {
				alert("le serveur renvoie une erreur:" + xhr.responseText);
			}
		}
        
		xhr.send(null);                
    } catch (ex) {
        alert("impossible: " + ex.message);
    }
   }
}

Citation:

Envoyé par FremyCompany

Sinon, je mettrais l'instanciation de onreadystatechange après open mais avant send

J'ai essayé et rien n'y change...

21/08/2006, 16h27
linar009

A mon avis c'est le xhr.reponseText qui pose probleme.
Mais je me dois de récupérer des données du serveur ...
21/08/2006, 16h28
FremyCompany
Je suis idiot ;)
Désolé de ne pas avoir vu ca plutot mais en fait, en mode asynchrone, la méthode onreadystatechange est exécutée 4 fois :
readyState=1 'Ouvert
readyState=2 'En cours
readyState=3 'En récéption
readyState=4 'Terminé

Lorsque readyState est à 4, responseText, responseXML, status et statusText sont valides sous FF (avant pas)

donc, tu dois changer ta validation :
Code:

1 2 3 4 5 6 7 if (xhr.readyState==4) { if (xhr.status==200) { //... } else { alert("Le serveur renvoie une erreur :" xhr.statusText) } }
Deplus si status n'est pas égal à 200, cela veut dire qu'il n'y a pas de xhr.responseText valide (404: fichier non trouvé, 500: erreur coté serveur, ...)
21/08/2006, 16h31
denisC

Citation:

Envoyé par FremyCompany

Euh, ca dépend comment tu considère une erreur....

Pour moi un déni de service est une erreur (et ici, il s'agit bien d'un déni de service, vu qu'on ne peut pas lancer plusieurs reqêtes et que ce n'est précisé nulle part)

Il n'est précisé nulle part non plus qu'on ne peut pas sécher un chat avec Ajax, ou bien cuire des merguez. Sérieusement, ce tutoriel fonctionne parfaitement sur le domaine qu'il s'est donné.

Si tu as envie de contribuer sous la forme d'un tutoriel tu es le bienvenu :)
21/08/2006, 16h34
linar009

Merci Fremy! Ca marche impeccable maintenant : plus d'erreurs dans la console.

Un grand merci.

Voir 40 message(s) de cette discussion en une page