vue XMLHttpRequest
Kommunauty
Connexion
Inscription

Forum Programmation XMLHttpRequest

XMLHttpRequest


Courroux Messages : 2215

Salut à tous,

voilà j'aimerai exécuter une requête SQL de façon transparente sans recharger la page. Pour cela, j'ai fait mes recherches et je suis tombé sur l'Ajax avec l'objet XMLHttpRequest.

Je m'explique, je voudrais sur une map gérer les déplacements des unités sans pour autant recharger la page à chaque déplacement. Actuellement mes déplacements sont gérés comme ça:

Lorsqu'un joueur passe le curseur de sa souris sur l'unité, on affiche un petit panel avec une liste de déplacement que l'unité peut effectuer (Haut, bas gauche, droite). Lorsqu'un joueur clique imaginons sur le déplacement vers le haut, il clique en réalité sur un lien qui le redirige vers un autre fichier avec toutes les infos nécessaires pour exécuter une requête SQL permettant de déplacer l'unité vers la direction voulue.


<script language="javascript">
function getXMLHttpRequest() {
    var xhr = null;
     
    if (window.XMLHttpRequest || window.ActiveXObject) {
        if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch(e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        } else {
            xhr = new XMLHttpRequest(); 
        }
    } else {
        alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
        return null;
    }
     
    return xhr;
}
function deplacement()
{
var xhr = getXMLHttpRequest();
xhr.open('GET', './jouer.php?medchoix=Partie&moveorder=haut&moveid=<?php echo $tmap[$xs][$ys]['ID']; ?>&joexs= <?php echo ($xs-1); ?>&joeys=<?php echo $ys; ?>');
xhr.send('');
}
</script>

Voici mon code Javascript que j'ai placé dans le fichier qui affiche le panel lorsqu'on pointe le curseur de la souris sur l'unité. Le truc c'est que j'ai utilisé l'objet XHR un peu n'importe comment (le code est pas très propre aussi je l'avoue mais c'est uniquement pour tester) et je sais pas s'il est utilisable sans passer par des formulaires mais uniquement par des liens.

Lucas, imprègne moi de ta sagesse

Edit: Finalement, ça fonctionne, la requête s'envoie bien mais l'unité n'est déplacée qu'une fois qu'on rafraîchit nous-même la page. Une solution pour rafraîchir de façon transparente une page ?
samedi 27 juillet 2013 (Dernière édition samedi 27 juillet 2013)

Lucas Messages : 830

Hihihiii, j'éditrai ce message ce soir avec une toute belle réponse, coder en js depuios les champs c'est pas top top
samedi 27 juillet 2013

Courroux Messages : 2215

D'accord super Lucas.

Sinon, est-ce que tu peux m'indiquer comment afficher un message sans recharger la page en fonction du déplacement de l'unité ? Imaginons par exemple que le joueur veut faire déplacer son unité dans de l'eau, tu pourrais m'indiquer comment afficher un message du genre "Impossible de traverser ce champs..." ?
samedi 27 juillet 2013

Lucas Messages : 830

Alors alors, c'est fini les enfantillages. Bon, donc ton espace de travail, en HTML imagé, concrètement, c'est un truc comme ça, hein ?

Le rond rouge, c'est ton unité. Le tableau bleu, c'est l'affichage des cases de ta map, et les flèches, les différentes actions de déplacement, bon ces éléments le plus simple c'est de les contenir dans la div du machin de ton unité, et de les positionner de manière relative, voilà.

Si tes requêtes fonctionnent, on va pas vraiment traiter de cette partie, mais en gros, dans ton code php tu peux choisir de retourner des valeurs. Si ya juste une seule manière de bloquer le déplacement, cad soit le déplacement est impossible, soit on déplace, on va faire simple.

Donc en php, tranquilou :

if($deplacement_ok_magueule){
  // On rajoute les déplacements dans la table SQL tant qu'à faire
  // Puis on donne le signal au reste du monde
  echo "tout est ok ma poule";
}
else {
  echo "nan gars, c'est pas terrible c'que tu nous fais là";
}

Et dans ton code js, va falloir récupérer ces gentils mots d'amour que PHP veut nous transmettre. Et là, responseText, bim.

function deplacement(){
	var xhr = getXMLHttpRequest();

	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			var rep = xhr.responseText;
			if(rep == "tout est ok ma poule"){
				// on déplace l'équipe
			}
			else if(rep == "nan gars, c'est pas terrible c'que tu nous fais là"){
				// on affiche un message d'erreur, avec un tremblement CSS3 stylax
			}
		}
	};

	xhr.open('GET', './jouer.php?medchoix=Partie&moveorder=haut&moveid=<?php echo $tmap[$xs][$ys]['ID']; ?>&joexs= <?php echo ($xs-1); ?>&joeys=<?php echo $ys; ?>');

	xhr.send(null);
}

Et évidemment la deuxième condition est pas très utile, mais le principe est là. Enfin, revenons au système de déplacement. Le truc qui me semble bien là maintenant, c'est dans ton code javascript, quelque part, de stocker une variable qui pointe vers la div contenant le rond de l'équipe plus les flèches. En théorie cette div est contenue dans une des cases du tableau. Et bin, on la retire en faisant

madiv.parentNode.removeChild(madiv);

// Et après on réinserre en jouant avec les propriétés"previousSibling" et "nextSibling", les index des cases du tableau et toussa, pour finalement trouver la case cible

macase.appendChild(madiv);

Boum.

Bon, ou sinon la div qui contient l'icône de l'unité est pas contenue dans le tableau, mais positionnée par dessus avec une position absolute, et là tu peux faire des belles anims, et ajouter ou retirer des unités en pixels, voilou.

Le code a pas été testé hihihihi donc si ça marche pas très bien bon bah voilà

(Ah, et language="javascript" c'est plus trop valide, c'est type="text/javascript" ou même rien maintenant ça marche automatiquement)
samedi 27 juillet 2013

Courroux Messages : 2215

J'suis une merde en JS, j'en utilise rarement, donc excuse moi si je suis pas tout ce que tu me dis

En fait, j'ai bien compris comment gérer les éventuelles erreurs mais ce que j'ai pas compris, c'est tout le reste. En fait, moi actuellement quand je déplace mon unité vers le haut disons, l'unité se déplace sans recharger la page mais le petit problème c'est qu'on ne peut pas observer ce déplacement tant qu'on n'a pas rechargé nous même la page.

En fait, c'est parce que la requête qui sélectionne les unités sur la carte n'est pas exécutée en Ajax mais bien en PHP. Le truc c'est que je sais pas trop comment m'y prendre pour exécuter cette requête avec xmlhttprequest et faire en sorte que la fonction qui exécute la requête s'exécute automatiquement chaque seconde par exemple, tu vois ce que je veux dire ?
samedi 27 juillet 2013

Courroux Messages : 2215

Excuse du double post.

Juste pour dire que à l'endroit où il y avait la requête SQL exécutée en PHP avant, j'ai remplacé par:


<script type="text/javascript">
function getXMLHttpRequest() {
    var xhr = null;
     
    if (window.XMLHttpRequest || window.ActiveXObject) {
        if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch(e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        } else {
            xhr = new XMLHttpRequest(); 
        }
    } else {
        alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
        return null;
    }
     
    return xhr;
}
function refreshCarte() {
	var xhr = getXMLHttpRequest(); // On récupère notre objet
	xhr.open('GET', 'include/test.php');
	xhr.send(null);
}
setInterval("refreshCarte()", 1000);
</script>

Et le fichier PHP contient la requête à exécuter.

Mais ça ne fonctionne pas

samedi 27 juillet 2013 (Dernière édition samedi 27 juillet 2013)

Lucas Messages : 830

Ah oui, donc on parle de multijoueur c'est ça ? Histoire de voir les autres joueurs bouger avec nous parce que hé c'est plus marrant à plusieurs ?

Hum… hihi c'est plus corsé déjà hinhinhin…

Donc, aparté vitef, l'erreur du js viens du fait que dans setInterval tu as laissé les parenthèses après le nom de la fonction passée en param, vire-les et ça doit être bon.

Sinon, donc c'est du multi ou c'est qu'on a sa dispo plusieurs unités, et on se déplace de l'une à l'autre ?
samedi 27 juillet 2013

Courroux Messages : 2215

Donc, aparté vitef, l'erreur du js viens du fait que dans setInterval tu as laissé les parenthèses après le nom de la fonction passée en param, vire-les et ça doit être bon.

Tu parles des parenthèses refreshCarte() ? Parce que dans cette ligne, je vois aucune erreur. Et oui, c'est un jeu multijoueur: Les deux joueurs peuvent déplacer leurs unités et il faut que ces déplacements se fassent en "temps réel" sans nécessairement recharger la page.

Avec mon code par contre là, la requête ne s'exécute pas du tout car je n'arrive plus du tout à voir les unités sur la carte.
samedi 27 juillet 2013

Lucas Messages : 830

Tu parles des parenthèses refreshCarte() ? Parce que dans cette ligne, je vois aucune erreur.

Hihihiihii qu'est-ce que je peux dire comme caca, on va mettre ça sur le coup de la fatigue…

Alors pour le multijoueur. Bon. Je vais être franc, la méthode "Je teste toutes les x millisecondes", ça marche, mais c'est complètement bourrin. Avec l'arrivée du HTML5 et ses amies, ya la technologie des websockets, vachement moderne et tout, pas de requêtes inutiles, classe. Mais. MAIS. Avec mon ordi hihi je supporte pas ça, donc moi je peux juste voir pour la méthode bourrin, en attendant mieux.

Bon, et sinon, alors le setInterval marche, donc bon, bah si le php s'exécute pas, c'est le ajax, vérifie le chemin du fichier, genre "./include/test.php", on sait jamais. Et du coup, dresse une liste de ce qu'il te faut réactualiser à chaque fois, les trucs occasionnels, les différents comportements, toussa. Après j'ai peur que comme c'est du temps réel, tu peux plus concevoir ton jeu en commençant d'abord par le développement PHP puis en ajoutant un peu de JS par ci par là, mais vachement structurer le code client pour le rendre plus extensible…

samedi 27 juillet 2013

Courroux Messages : 2215

Concernant les websockets, je m'y étais tourné à un moment mais j'sais plus pourquoi j'ai pas adopté... J'pense que c'était parce qu'il fallait installer un truc sur le serveur et que j'avais pas les accès root.

Sinon, c'est pas une erreur de chemin vers le fichier, j'ai bien vérifié. Ce qui me fait chier c'est qu'Ajax exécute bien la requête SQL pour modifier la position de l'unité mais il n'arrive pas à exécuter (alors que c'est exactement le même code) la requête pour lire la position de l'unité...
samedi 27 juillet 2013

Répondre Pour répondre, tu dois d'abord t'inscrire rapidement sur Kommunauty. Rejoins-nous vite !

Forum Programmation XMLHttpRequest

Kommunauty © Tous droits réservés Contact / Charte & Mentions légales / Hebergement gratuit / Bon plan hébergement / Aide B2i

RSS