[AJAX] Transmettre plusieurs valeurs et les r'afficher.

Version imprimable

11/03/2008, 19h07
univscien

[AJAX] Transmettre plusieurs valeurs et les r'afficher.

Bonjour,

Je suis en train de créer un mmorpg par navigateur et je doit lors du déplacement sur Map, récupérer plusieurs valeurs.

Il y a premièrement les coordonnés du personnage sur une grande Map mais également les coordonnés d'un autre objet sur une petite Map, mon but étant biensûr d'afficher les 2 maps une foi la requette faite.

J'effectue cette requette à l'aide de flèche directionelles faisant appel à une fonction JS. Cette fonction JS transmet une variable post en Ajax et dans mon code php si cette variable existe, je fait un echo de ce que je veux envoyer. Mais voilà; mon problème c'est que je ne voudrais pas envoyer "un texte", mais plusieurs.

Comment pourais-je faire?
En me renseignant un peu, j'ai entendu parlé d'XML, mais rien de bien concret.
Pouriez vous me donner des exemples / explications ?

Merci. ;)
13/03/2008, 18h32
univscien

Il ne me semble pas que ce que je demande soit vraiment dur... ^^'
13/03/2008, 19h05
DoubleU

C'est pas non plus évident de répondre sans code pour voir ce que tu fais/cherche a faire ^^

Oui je comprend, pensant que mon problème était général je n'en est pas mis. Mais si vous en voulez, en voilà... :)

Page php sans variable Ajax:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
echo'
        <fieldset class="quetemap"><legend>Actions</legend>
                <fieldset><legend>Déplacement</legend><center>
                <table>
                        <tr><td colspan="3"><img src="image_outil/flechehaut.gif" alt="haut" style="cursor: pointer;" onclick="DeplaceMap(\'haut\');"/></td></tr>
                        <tr>
                                <td><img src="image_outil/flechegauche.gif" alt="gauche" style="cursor: pointer;" onclick="DeplaceMap(\'gauche\');"/></td>
                                <td><div id="minimap"><img src="Map/GrandeMap/cadrerouge.png" id="imageminimap" alt="Map" style="margin-top: '. $_SESSION['y']/30 .'px;margin-left: '. $_SESSION['x']/30 .'px;" /></div></td>
                                <td><img src="image_outil/flechedroite.gif" alt="droite" style="cursor: pointer;" onclick="DeplaceMap(\'droite\');"/></td>
                        </tr>
                        <tr><td colspan="3"><img src="image_outil/flechebas.gif" alt="bas" style="cursor: pointer;" onclick="DeplaceMap(\'bas\');"/></td></tr>
                </table>
                </center>
                </fieldset>
                <fieldset><legend>Actions</legend>
                        <div style="height: 125px;margin-left: 5px;overflow-y:auto;">
                        <br />
                        <form action="quete.php?sauver=ok" method="post"><input type="submit" style="font-size: 12px;height: 21px;" value="Sauvegarder" /></form>
                        </div>
                </fieldset>
        </fieldset>';
?>

Au clique sur une flèche, j'appel ma fonction DeplaceMap():

Fonction DeplaceMap(): (ajaxInit(); est une fonction qui initialise ajax)

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
function DeplaceMap(orientation)
 {
	ajaxInit();
	var url = "quete.php";
    var post = "orientation="+orientation;
 
    httpReq.onreadystatechange = resultatPostDeplaceMap;
 
    httpReq.open('POST', url, true);
    httpReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    httpReq.setRequestHeader("Content-length", post.length);
    httpReq.setRequestHeader("Connection", "close");
    httpReq.send(post);  
    return false;
 }
 
 function resultatPostDeplaceMap()
 {
	if (httpReq.readyState == 4) {
       if (httpReq.status == 200) {
         var resultatPostDeplaceMap = httpReq.responseText;
		 $("coordMapImg").style.backgroundPosition = resultatPostDeplaceMap;
      } else {
         alert('Un problème est survenu avec la requête.');
      }
    }
 }

Je renvois l'orientation / Voir code suivant / Je récupère le texte envoyé et modifis la position du background

Page php ayant reçu la variable Ajax:

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
if (isset($_POST['orientation']))
{
session_start();
header("Content-type: image/png"); //on envoie les infos au navigateur
$img_miniMap = imagecreatefromgif("Map/GrandeMap/mapnoirblanc.gif"); //on ouvre l'image source
	if($_POST['orientation'] == "haut")
	{
	$y_mini = $_SESSION['y'] + 110 - 20;
	$x_mini = $_SESSION['x'] + 190;
	$rgb = ImageColorAt($img_miniMap, $x_mini, $y_mini);
	$r = ($rgb >> 16) & 0xFF; //Rouge 
	$g = ($rgb >> 8) & 0xFF; //Vert 
    $b = $rgb & 0xFF; //Bleu
	$col = $r.$g.$b;
	if($col!=000){$_SESSION['y'] -= 20;}# Si différent de noir ---> New coordoné...
	}
	elseif($_POST['orientation'] == "gauche")
	{
	$x_mini = $_SESSION['x'] + 190 - 20;
	$y_mini = $_SESSION['y'] + 110;
	$rgb = ImageColorAt($img_miniMap, $x_mini, $y_mini);
	$r = ($rgb >> 16) & 0xFF; //Rouge 
	$g = ($rgb >> 8) & 0xFF; //Vert 
    $b = $rgb & 0xFF; //Bleu
	$col = $r.$g.$b;
	if($col!=000){$_SESSION['x'] -= 20;}# Si différent de noir ---> New coordoné...
	}
	elseif($_POST['orientation'] == "droite")
	{
	$x_mini = $_SESSION['x'] + 190 + 20;
	$y_mini = $_SESSION['y'] + 110;
	$rgb = ImageColorAt($img_miniMap, $x_mini, $y_mini);
	$r = ($rgb >> 16) & 0xFF; //Rouge 
	$g = ($rgb >> 8) & 0xFF; //Vert 
    $b = $rgb & 0xFF; //Bleu
	$col = $r.$g.$b;
	if($col!=000){$_SESSION['x'] += 20;}# Si différent de noir ---> New coordoné...
	}
	elseif($_POST['orientation'] == "bas")
	{
	$y_mini = $_SESSION['y'] + 110 + 20;
	$x_mini = $_SESSION['x'] + 190;
	$rgb = ImageColorAt($img_miniMap, $x_mini, $y_mini);
	$r = ($rgb >> 16) & 0xFF; //Rouge 
	$g = ($rgb >> 8) & 0xFF; //Vert 
    $b = $rgb & 0xFF; //Bleu
	$col = $r.$g.$b;
	if($col!=000){$_SESSION['y'] += 20;}# Si différent de noir ---> New coordoné...
	}
echo '-'.$_SESSION['x'].'px -'.$_SESSION['y'].'px';
}
else
{
#Affichage de la page
}

Je test les coordoné pour s'avoir si j'incrément ou pas les variables de positions (Ne vous en occupez pas). Et je fait un echo des coordonées.

Ce que je voudrais donc c'est renvoyer par exemple les coordonés (comme ici), mais également un nombre aléatoire ou autres.
Comment pourais-je donc faire? :P

13/03/2008, 23h38
DoubleU

T'as plusieurs façons possibles de faire en fait.

Soit tu retournes tes données dans un arbre xml , soit tu renvoies ce qu'on appelle du JSON (JavaScript Object Notation), ou encore mais c'est plus crade et déconseillé, tu écris du code javascript dans tes echos et tu fais juste eval(xhr.responseText).

Dans les deux premiers cas, il te reste juste ensuite a parser ta réponse pour récupérer tes données et en faire ce que tu veux.

Tu peux regarder ici si la lecture anglophone ne te fais pas peur ^^
15/03/2008, 11h52
univscien

Merci pour la réponse. Je me suis donc renseigné (En français xD), mais j'ai du mal à imaginer une chose concrète. On pourait me donner un exemple svp ? ^^

Un exemple avec du xml:

Code:

1
2
3
4
5
6
7
8
9
10
<?
   header("Content-Type: text/xml");
   ...
   $xml = "<?xml version='1.0' encoding='ISO-8859-1'?>
              <coord> 
                 <x>$_SESSION['x'] px</x>
                 <y>$_SESSION['y'] px</y>
              </coord>";
   echo $xml;
?>

Code:

1
2
3
4
5
6
7
8
9
10
11
 
 function resultatPostDeplaceMap()
 {
       if (httpReq.readyState == 4) {
            if (httpReq.status == 200) {
                 var xml = httpReq.responseXML;
                 var x = xml.getElementsByTagName("x").firstChild.nodeValue;
                 var y = xml.getElementsByTagName("y").firstChild.nodeValue;
            }
       }
 }

Je t'avoue que j'ai pas testé et que je suis pas sur que le code php marche (ca fait bien longtemps que j'en n'ai pas fait) mais l'idée est la.

EDIT : Merci :)

Re-Edit: A quoi sert exactement firstChild.nodeValue ?
Car avec l'extension firefox, j'ai un message d'erreur: xml.getElementsByTagName is not a function
[Break on this error] var coord_Gmap = xml.getElementsByTagName("coord_Gmap").firstChild.nodeValue;

Php:

Code:

1
2
3
4
5
6
7
$xml = '<?xml version=\'1.0\' encoding=\'ISO-8859-15\'?>
		  <coord> 
			 <coord_Gmap>-'.$_SESSION['x'].'px -'.$_SESSION['y'].'px</coord_Gmap>
			 <coord_Mmap_x>'. $_SESSION['x']/30 .'</coord_Mmap_x>
			 <coord_Mmap_y>'. $_SESSION['y']/30 .'</coord_Mmap_y>
		  </coord>';
echo $xml;

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
32
function DeplaceMap(orientation)
 {
	ajaxInit();
	var url = "quete.php";
    var post = "orientation="+orientation;
 
    httpReq.onreadystatechange = resultatPostDeplaceMap;
 
    httpReq.open('POST', url, true);
    httpReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    httpReq.setRequestHeader("Content-length", post.length);
    httpReq.setRequestHeader("Connection", "close");
    httpReq.send(post);  
    return false;
 }
 
 function resultatPostDeplaceMap()
 {
	if (httpReq.readyState == 4) {
       if (httpReq.status == 200) {
         var xml = httpReq.responseXML;
		 var coord_Gmap = xml.getElementsByTagName("coord_Gmap").firstChild.nodeValue;
		 var coord_Mmap_x = xml.getElementsByTagName("coord_Mmap_x").firstChild.nodeValue;
		 var coord_Mmap_y = xml.getElementsByTagName("coord_Mmap_y").firstChild.nodeValue;
		 $("coordMapImg").style.backgroundPosition = coord_Gmap;
		 $("imageminimap").style.left = coord_Mmap_x;
		 $("imageminimap").style.top = coord_Mmap_y;
      } else {
         alert('Un problème est survenu lors de la requête.');
      }
    }
 }

15/03/2008, 14h48
DoubleU
Autant pour moi, j'avais oublié un truc ^^
Code:

1 2 var x = xml.getElementsByTagName("x")[0].firstChild.nodeValue;
C'est le problème avec les méthodes pour manipuler le DOM en javascript, c'est vraiment bordélique.
En fait la ligne valister tous les noeuds "x" (getElementsByTagName) dans l'arbre xml, prendre le premier élément de la liste ([0]), aller chercher le noeud texte (firstChild) et enfin chercher le texte (nodeValue)

Merci, je n'est plus vraiment de problème à ce niveau, par contre, j'aimerais transmettre un formulaire et apparement il ya un problème.
Code:

1 2 3 4 5 6 7 8 9 10 $xml = '<?xml version=\'1.0\' encoding=\'ISO-8859-15\'?> <coord> <coord_Gmap>-'.$_SESSION['x'].'px -'.$_SESSION['y'].'px</coord_Gmap> <coord_Mmap_x>'. $_SESSION['x']/30 .'px</coord_Mmap_x> <coord_Mmap_y>'. $_SESSION['y']/30 .'px</coord_Mmap_y> <action1>'.$af.' <form action="quete.php?sauver=ok" method="post"><input type="submit" style="font-size: 12px;height: 21px;" value="Sauvegarder" /></form> </action1> </coord>'; echo $xml;
Le formulaire n'est pas pris en compte.
En me renseignant un peu j'ai essayé de faire action1:form ... mais çà ne marche pas. :?

16/03/2008, 14h24
univscien

J'ai du mal avec le formulaire... ^^'
EDIT: J'ai entouré mes balise avec <![CDATA[...]]> et çà à l'air de marcher. ;)