[AJAX] Casse-tête asynchrone

Merci de ta réponse , pour le compteur , c'est bon , j'envoie déjà les coordonées concernées 'In URL' , et en fonction le serveur renvoi la bonne réponse ..
Le problème c'est pour faire 'patienter' Javascript , qui m'a l'air d'être un langage qui ne sait pas attendre sans tout bloquer ;) !


Voila donc mon code , j'ai essayé de commenter mais je sait pas trop si le résultat est probant :


La fonction générale que j'appelle , avec pour argument , les coordonnée x,y de n'importe quelle case de mon 'monde'.

//Fonction de gestion globale
function loadmap(x,y)
{
//Initialisation des variables qui indiquent la div dans laquel on doit afficher
	var affx=0;
	var affy=0;

//On teste que les parametre entré soit correcte , sinon on les modifi
	if(x<1){x=1;}
	if(y<1){y=1;}
	if(x>171){x=171;}
	if(y>171){y=171;}
	
	if(((x-1)/9)!=Math.floor((x-1)/9)){x=Math.floor(x/9)*9+1;}
	if(((y-1)/9)!=Math.floor((y-1)/9)){y=Math.floor(y/9)*9+1;}

//On met a jour les fleches qui permettent de se déplacer d'un territoire a l'autre
	document.getElementById('gauche').onclick=function() { loadmap(x-9,y);}
	document.getElementById('droite').onclick=function() { loadmap(x+9,y);}
	document.getElementById('bas').onclick=function() { loadmap(x,y+9);}
	document.getElementById('haut').onclick=function() { loadmap(x,y-9);}

//On boucle du coin x,y indiqué jusque , X+8 et y+8 (soit 9x9 cases) 
	for(posx=x;posx<x+9;posx++)
	{
		affx=affx+1;
		affy=0;
		for(posy=y;posy<y+9;posy++)
		{
			affy=affy+1;
		//On vide la case
			document.getElementById(affx*10+affy).onmouseover=function() { overlib("<center>"+posx+" x "+posy+"</center>",WIDTH, 60);}
			document.getElementById(affx*100+affy).src="images/map_0.png";
		//On lance la fonction qui va faire la requette pour la remplir
			map(posx,posy,affx,affy);
		}
	}
}

Dans cette fonction c'est la boucle 'for' qui me préoccupe , car apparemment , c'est elle qui refuse d'attendre la fin de sont contenu pour continuer..


La fonction qui lance les requêtes :

//Rempli les différentes cases
function map(posx,posy,affx,affy)
{
//On crée une variable pour receuillir le résultat
	var xhr=null;
    
//On crée les HttpRequest
	if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
	
//On défini ce que le navigateur doit faire la fin de la requete
    xhr.onreadystatechange = function() { maj_case(xhr,posx,posy,affx,affy); };
	
//On lance la requette
    xhr.open("GET", "rep_map.php?x="+posx+"&y="+posy, true);
	
//Heu on fait un truc que je sait pas a quoi ca sert ;)
    xhr.send(null);
}

Celle ci n'a rien de particulier , elle lance une requête en définissant ce que JS doit faire a la fin.


Et pour finir de bien charger le message , la fonction de gestion de la réponse du serveur :D !

//Fonction qui permet de gerer la réponse du serveur
function maj_case(xhr,posx,posy,affx,affy)
{
	
//On définit les variables
	var docXML= xhr.responseXML;
	var items = docXML.getElementsByTagName("donnee");

//Si une réponse (pas sur que ce soit ca ...)
	if(items)
	{
	//On définit une variable pour le contenu de la bulle d'option
		var option ="";
	//Si la case est non vide
		if(items.item(1).firstChild.data>1)
		{
		//On teste le contenu de la case et on met l'image en conséquence
			if(items.item(1).firstChild.data==4)
			{
				document.getElementById(affx*100+affy).src="images/map_"+items.item(1).firstChild.data+"_"+items.item(2).firstChild.data+".png";
			}
			else
			{
				document.getElementById(affx*100+affy).src="images/map_"+items.item(1).firstChild.data+".png";
			}
			
		//On teste a présent les options disponibles :
			if(items.item(5).firstChild.data==1)
			{
				option="<center><br><a href=troupe.php?act=0&origin=map&posx="+posx+"&posy="+posy+">Conqu&eacute;rir depuis le chateau</a></center>";
			}
			
			if(items.item(5).firstChild.data==2)
			{
				option="<center>Vous ne pouvez pas conquérir<br>des terrains abandonnée sur une autre zone que la votre.</center>";
			}
			
			if(items.item(5).firstChild.data==3)
			{
				option="<center><br><a href=troupe.php?act=0&origin=map&posx="+posx+"&posy="+posy+">Attaquer depuis le chateau</a><br>Espionner depuis le chateau</center>";
			}
			
			if(items.item(5).firstChild.data==4)
			{
				option="<center><br><a href=index.php?func=gere&type=1>G&eacute;rer le chateau</a></center>";
			}
			
			if(items.item(5).firstChild.data==5)
			{
				option="<center><br><a href=troupe.php?act=0&origin=choix&posx="+posx+"&posy="+posy+">G&eacute;rer les troupes</a><br><a href=troupe.php?act=0&origin=map&posx="+posx+"&posy="+posy+">D&eacute;placer ici depuis le chateau</a><br><a href=index.php?func=gere&type=1&act=5&posx="+posx+"&posy="+posy+">Am&eacute;liorer&nbsp;le&nbsp;niveau&nbsp;("+items.item(6).firstChild.data+")</a></center>";
			}
		//On met a jour les 'Overlib' des div concernés
			document.getElementById(affx*10+affy).onmouseover=function() { overlib(posx+"&nbsp;x&nbsp;"+posy+"&nbsp;("+items.item(3).firstChild.data+")<br>"+items.item(4).firstChild.data,WIDTH, 60);}
			document.getElementById(affx*10+affy).onclick=function() {  overlib(option,STICKY,CAPTION,posx+"&nbsp;x&nbsp;"+posy+"<br>"+items.item(4).firstChild.data,CENTER,WIDTH, 200,HEIGHT,50,NOCLOSE);}
		}
	}
}

Pour la partie Php , le serveur renvoi un XML avec juste :
<map>
</map>

si la case est vide sinon , quelque chose comme :

<map>
<donnee>Hello</donnee>
</map>

Et voilà , si ça peut vous aider à résoudre mon problème ... Si vous voyez des amélioration à faire dans mon code (et je suis sur que il y en a un paquet ...) n'hésitez pas !

Hum... Mon code a beaucoup évolué depuis, il ne ressemble plus trop a ça , même si je fait toujours des requêtes HTTP.
Voila la partie de code javascript qui se charge des requêtes a mes pages php, elle marche très bien sur firefox et IE, et je pouvais la lancer plusieurs fois d'affiler sans problème (même si je ne la lance plus qu'une fois maintenant, la page php renvoyant toutes les informations d'un coup.) :

//Rempli les différentes cases
function map(debx,deby,finx,finy,affx,affy)
{
//On crée une variable pour receuillir le résultat
	var xhr=null;
	
//On crée les HttpRequest
	if (window.XMLHttpRequest) { 
		xhr = new XMLHttpRequest();
	}
	else if (window.ActiveXObject) 
	{
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	
//On défini ce que le navigateur doit faire la fin de la requete (lance maj_case avec les parametres donné quand la requete est terminée)
	xhr.onreadystatechange = function() { maj_case(xhr,debx,deby,finx,finy,affx,affy,affy); };
	
//On configure la requete
	xhr.open("GET", "rep_map.php?debx="+debx+"&deby="+deby+"&finx="+finx+"&finy="+finy, true);
	
//Et on la lance
	xhr.send(null);
}

Powered by : The Wall Et Gain Brothers

Je sais pas , j'ai réussi avec tout faire sans changer ce paramètre moi ^^'...

Je crois que cette ligne :

xhr.onreadystatechange = function() { maj_case(xhr,debx,deby,finx,finy,affx,affy,affy); };

Signifie qu'il ne lance la requête que quand xhr change d'état, il suffit de mettre un test dans la fonction ciblée pour vérifié que la requête est bien finie...
Après c'est vrai que je débute en Javascript et AJAX, je le fait plus au feeling donc ^^' ...