Discussion :

[saipas]

Yop,

je suis en train de faire une petite api pour gérer un stock là où je travaille, et j'ai un petit soucis lors de l'appel à la BDD.
En fait tout fonctionne bien. Pour vous expliquer voici le code:

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
 
function ajax(num, arg)
{
    var xhr=null;
 
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
 
    var ii = [];
    xhr.onreadystatechange = function() { 
        if (xhr.readyState==4) 
        {
	        var	docX = xhr.responseXML;
	        var items = docX.getElementsByTagName("rep");
	        if (items.length != 0){
		        for (i=0;i<items.length;i++)
		      	{
			      	ii[i] = items[i].getAttribute("ii");
		      	}
	        }
		    else
		        {alert("rien trouvé");}
        }
    };
    xhr.open("GET", "requete_mysql_xml.php?num=" + num + "&arg=" + arg, true);
    xhr.send(null);
    var i = 0;
//	while (ii.length == 0) {}
    return ii;
}

En gros tout à la fin vous pouvez voir que j'ai mis un "while", et ce parce que sinon le code continue à s'exécuter sans que xhr.readystate soit à 4, et par conséquence sans que mes données soient récupérées depuis la bdd.
Le problème là dedans c'est que ça fait bugger le navigateur, et là en particulier il me demande à chaque fois si je veux arrêter le script gourmand.

Donc voilà, j'aurais aimé savoir si vous connaissiez une parade à ça

Merci d'avance
A+
saipas

[emmanuel.remy]

Salut,

Ton code est correct, et ta requête AJAX est asynchrone, d'où la continuité d'exécution, et la fonction de rappel onreadystatechange. Ton souci c'est que ta variable ii est locale à ta fonction . Plutôt ce code::

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
 
var ii = [];
function ajax(num, arg)
{
    var xhr=null;
 
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
 
    xhr.onreadystatechange = function() { 
        if (xhr.readyState==4) 
        {
	        var	docX = xhr.responseXML;
	        var items = docX.getElementsByTagName("rep");
	        if (items.length != 0){
		        for (i=0;i<items.length;i++)
		      	{
			      	ii[i] = items[i].getAttribute("ii");
		      	}
	        }
		    else
		        {alert("rien trouvé");}
        }
    };
    xhr.open("GET", "requete_mysql_xml.php?num=" + num + "&arg=" + arg, true);
    xhr.send(null);
}

dès que ta requête AJAX a fini et récupéré ses données, alors ton tableau ii est accessible.

ERE

[saipas]

Salut Emmanuel,

merci pour ta réponse.
Je crois que ton astuce ne convient pas tout à fait au reste de mon code. En gros la fonction ajax (renommée fetchSQL depuis :p) se trouve dans un .js, et est appelée directement par la page (comme tu t'en doutes) avec un truc du genre :

Code :

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

1
2
3
4
5
6
7
 
	var rslt = fetchSQL(num, arg);
    for (i=0;i<rslt.length;i++)
  	{
      	nv = new Option(rslt[i]);
      	document.getElementById('selectObj').options[document.getElementById('selectObj').length] = nv;
  	}

Donc voilà, si j'utilise une variable globale ii ne vais-je pas avoir du mal pour la suite de l'exécution, qui affiche le résultat de la requête sur ma page?

Encore merci pour ton aide

[emmanuel.remy]

Re,

Ce n'est pas une "astuce" mais la démarche normale dans le cadre d'un appel asynchrone: tu ne peux pas accéder de suite aux données car ton script ne bloque pas le navigateur le temps de l'appel AJAX. D'où la fonction de rappel

Si tu souhaites faire ce que tu inscris, alors le code ressemblera - de base - à cela:

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
//fctn est la fonction qui recevra le tableau des lignes récupérées
function fetchSQL(num, arg, fctn)
{
    var xhr=null;
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
 
    xhr.onreadystatechange = function() { 
        if (xhr.readyState==4) 
        {
	        var	docX = xhr.responseXML;
                var ii = [];
	        var items = docX.getElementsByTagName("rep");
	        if (items.length != 0){
		        for (i=0;i<items.length;i++)
		      	{
			      	ii[i] = items[i].getAttribute("ii");
		      	}
                        if (fctn) fctn(ii);
	        }
		    else
		        {alert("rien trouvé");}
        }
    };
    xhr.open("GET", "requete_mysql_xml.php?num=" + num + "&arg=" + arg, true);
    xhr.send(null);
}

Et tu appelles ta fonction ainsi:

Code :

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

1
2
3
4
5
6
7
8
 
 fetchSQL(num, arg, function(rslt ){
       for (var i=0;i<rslt.length;i++)
  	    {
      	     nv = new Option(rslt[i]);
  	     document.getElementById('selectObj').options[   document.getElementById('selectObj').length ] = nv;
  	}
    });

Et bien sûr si ta fonction fetchSQL n'a pas besoin de ce caractère "générique", alors tu intègres directement le code de la fonction de traitement au sein de fetchSQL.

ERE

[saipas]

Wow, je t'avouerais que je ne comprends pas tout (voire rien) à ce que tu as fait, mais en tous cas ça marche nickel

Merci pour l'aide!!

[saipas]

Lol, je reviens à l'attaque...
En fait j'utilise pas mal la fonction fetchSQL dans l'api (à chaque fois que je fais une requête vers la base) et j'aurais bien aimé avoir un appel à la fonction du style funct(param). C'est possible?

J'ai essayé de reconstruire un autre tableau à partir de l'autre mais ça fonctionne pas.. je suppose que c'est dû au fait que je ne comprends pas ce que fait ta fonction

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
 
//marche pas
function fetchSQL2(num, arg)
{
	var rslt2 = [];
	fetchSQL(num, arg, function(rslt) {
	    for (i=0;i<rslt.length;i++)
	  	{
	      	rslt2[i] = rslt[i];
	  	}
	});
	return rslt2;
}
 
function fillin(num, arg){
	var rslt = fetchSQL2(num, arg);
    for (i=0;i<rslt.length;i++)
  	{
      	nv = new Option(rslt[i]);
      	document.getElementById('selectObj').options[document.getElementById('selectObj').length] = nv;
  	}
}

[emmanuel.remy]

Non, c'est toujours le même souci, le fait que la requête AJAX est asynchrone. Tu ne peux donc pas faire:

Code :

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

1
2
3
4
5
6
7
8
	var rslt2 = [];
	fetchSQL(num, arg, function(rslt) {
	    for (i=0;i<rslt.length;i++)
	  	{
	      	rslt2[i] = rslt[i];
	  	}
	});
	return rslt2;

Sur le principe c'est ok, sauf que le return a lieu alors que la requete AJAX n'est pas finie...

Et cela ne t'apporte pas grand chose... plutôt faire:

Code :

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

1
2
3
4
5
6
7
8
9
function fillin(num, arg){
	fetchSQL(num, arg, function(rslt) {
           for (i=0;i<rslt.length;i++)
  	      {
      	      nv = new Option(rslt[i]);
      document.getElementById('selectObj').options[document.getElementById('selectObj').length] = nv;
  	      }
       }
}

Je ne suis pas convaincu de l'intérêt (ou de l'avantage) de créer une telle focntion mais c'est la démarche.

ERE

[saipas]

Ok merci pour la réponse.

Je fais ça parce qu'à côté j'ai un appel à la fonction fillin depuis un bouton. Là en l'occurence c'est une page test donc effectivement c'est pas folichon mais sur mes autres pages ça va chercher des valeurs de textbox puis fait une recherche dans la base.

Voili voilou, merci encore

[emmanuel.remy]

Ok merci pour la réponse.

Je fais ça parce qu'à côté j'ai un appel à la fonction fillin depuis un bouton. Là en l'occurence c'est une page test donc effectivement c'est pas folichon mais sur mes autres pages ça va chercher des valeurs de textbox puis fait une recherche dans la base.

Voili voilou, merci encore

OK, je comprends un peu mieux, ce sera effectivement plus clair ainsi

Bon dev,

ERE

[saipas]

Petite précision : j'ai dû modifier ça dans la fonction fetchSQL, sinon quand il n'y avait pas de résultat à la requête ça ne renvoyait rien du tout...

Code :

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

1
2
3
4
5
6
 
		    else
		    {
		        ii[0] = "Rien trouvé";
		        fctn(ii);
		    }

A+

[emmanuel.remy]

Plutôt:

Code :

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

1
2
3
4
5
6
7
8
9
 
var ii = [ "Rien trouvé" ];
if (items.length > 0){
  for (i=0;i<items.length;i++)
  {
     ii[i] = items[i].getAttribute("ii");
  }
}
fctn(ii);

ERE

[saipas]

Adjugé vendu!