JeuWeb - Crée ton jeu par navigateur
[résolu pour le moment :P] Ajax, aide svp - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [résolu pour le moment :P] Ajax, aide svp (/showthread.php?tid=1953)

Pages : 1 2 3 4 5 6


[résolu pour le moment :P] Ajax, aide svp - V1nc3 - 02-11-2007

Bonjour,
Je vais vous présenter mon problème du jour ^^

Dans mon WiP j'ai besoin de créer une fonction javascript pour faire bouger mes persos sur la carte :

Code PHP :
<?php 
echo '<td><a class =\"n_o\" href =\"javascript:bouger(-1,1)\"> </a></td>'

La fonction javascript devrai donner quelque chose dans ce genre :

Code PHP :
<?php 
function bouger(x, y)
{
//requete sql faisant bouger en x, y après quelques vérifications préalables
}

J'ai donc lu un tuto sur l'ajax et voila ce que j'ai a peu près compris a faire :

Code PHP :
<?php 
var xhr; // on déclare l'instance

if (window.XMLHttpRequest) xhr = new XMLHttpRequest(); // Firefox, Opera, Konqueror, Safari, ...
else if (window.ActiveXObject) xhr = new ActiveXObject('Microsoft.XMLHTTP'); // Internet Explorer

else alert('JavaScript : votre navigateur ne supporte pas les objets XMLHttpRequest...');
xhr.open('POST','pages/requetes.php',true);

xhr.onreadystatechange = function()
{
if (
xhr.readyState == 4)
{


}
}

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

Si quelqu'un s'y connait suffisament pour me faire un petit exemple avec une ou deux directions et m'expliquer comment j'inclus ça, et la page.php ça serai sympa, merci ^^


RE: Ajax, aide svp - V1nc3 - 02-11-2007

Personne capable de m'aider sur ce coup alors? :S


RE: Ajax, aide svp - nemesis_elite - 02-11-2007

Salut Smile

Regarde ce lien, il est vraiment pas mal, pour comprendre le principe du xmlhttprequest
lien ?

NemeSiS_eliTe


RE: Ajax, aide svp - V1nc3 - 02-11-2007

J'avais déjà lu un tuto dans ce genre (ça m'as pas empéché de lire celui la aussi ^^)
Voila ce que j'avais fais :

ajax.js :

Code PHP :
<?php 
var xml;

if (
window.XMLHttpRequest)
xml = new XMLHttpRequest();
else if (
window.ActiveXObject)
xml = new ActiveXObject('Microsoft.XMLHTTP');
else
alert('JavaScript : votre navigateur ne supporte pas les objets XMLHttpRequest...');

xml.open('POST','../pages/requetes.php',true);

xml.onreadystatechange = function()
{
if (
xml.readyState == 4)
{


}
}

xml.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

Eulement maintenant je fais quoi?...
(je sais pas trop comment fonctionne le xml Confused)


RE: Ajax, aide svp - nemesis_elite - 02-11-2007

Utilise l'exemple concret qui est donné dans le lien, après tu a juste a modifier la requête.

Tiens un exemple d'une fonction javascript d'un de mes codes :
Code PHP :
<?php 
function getXhr(){
var
xhr = null;
if(
window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(
window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (
e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else {
// XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return
xhr;
}
function
goo(){
var
xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if (xhr.readyState < 4) {
document.getElementById('chargement').style.display = "inline";
}

if(
xhr.readyState == 4 && xhr.status == 200){
document.getElementById('chargement').style.display = "none";
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('text').innerHTML = leselect;
}
}

// Ici on va voir comment faire du post
xhr.open("POST","ajaxAffichage.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id de l'auteur

sel = document.getElementById('auteur');
idauteur = sel.options[sel.selectedIndex].value;

livre = document.getElementById('livre');
idlivre = livre.options[livre.selectedIndex].value;

xhr.send("idAuteur="+idauteur+"&idLivre="+idlivre);
}



RE: Ajax, aide svp - Sephi-Chan - 02-11-2007

Voila ce à quoi pourrait ressembler le bout manquant que tu présentes :
Code PHP :
<?php 
if (xmlhttp.readyState == 4){
//alert(xmlhttp.responseText);
var map = document.getElementById('map');
map.innerHTML = xmlhttp.responseText;
}

En fait, la variable responseText contient la sortie textuelle de la page appelée par la méthode open(). En l'occurrence ta page requete.php.

Imaginons que le code de requete.php soit :
Code PHP :
<?php 
mysql_connect
('localhost:8888', 'root', 'root');
mysql_select_db('test');

$query = mysql_query("SELECT 'pomme de terre' AS text;");
$result = mysql_fetch_assoc($query);

echo
'<p>'.$result['text'].'</p>';

Alors le script Ajax mettrait la sortie textuelle de ce fichier requete.php (dans notre cas la chaîne <p>pomme de terre</p>) dans l'élément de la page dont l'id est map.

Voilà globalement comment ça marche.


Sephi-Chan


RE: Ajax, aide svp - V1nc3 - 02-11-2007

Merci a vous deux de m'aider.
En fait, dans mon cas présent, j'ai une fonction, bouger(x,y), qui prends en paramètre x et y donc je devrai faire une requête de ce genre dans mon exemple :

Code PHP :
<?php 
mysql_query
("UPDATE persos_cda SET coord_x = coord_x + x AND coord_y = coord_y + y WHERE id_perso = '".fonction_qui_recupere_id_d_perso_actuel()."'");

Et je vois pas comment je vais envoyer le x et le y dans requetes.php...
en fait la je renvoie rien avec requetes.php, mais je veux lui envoyer quelque chose...


RE: Ajax, aide svp - Sephi-Chan - 03-11-2007

Pour transmettre tes données à ton script requete.php, il te faut les stocker dans une variable, que tu nommes par exemple data.

Tu dis que ta fonction Javascript prend comme argument les variables x et y, tu définis donc ta variable data de cette manière :
Code PHP :
<?php 
var data = "coord_x=" + x + "&coord_y = " + y;
Je pense que l'exemple te suffit à comprendre que tes variables Javascript seront transmises à la page PHP, et que tu pourras les récupérer en appelant $_POST['coord_x'] et $_POST['coord_y'] (puisque tu as choisis de transmettre tes données par la méthode POST).

Ensuite, tu procèdes comme tu l'avais fais, et tu envoie les données par la méthode send(), comme ça :
Code PHP :
<?php 
xhr
.open("POST", "requete.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data);

Pour ta requête, tu peux utiliser une variable de session pour savoir l'id du joueur que tu veux déplacer.


Sephi-Chan


RE: Ajax, aide svp - V1nc3 - 03-11-2007

Pour ce qui est de ma question si on peut mettre plusisuers requetes différentes dans requetes.php c'est possible, ou je doit en créer un a chaque fois (quoique avec les isset normalement non..)

Voila ce que j'ai fais :

jouer.php :

Code PHP :
<?php 
<script type =\"text/javascript\" src =\"javascript/ajax.js\"></script>
<td><a class =\"n_o\" href =\"javascript:bouger(-1,1)\"> </a></td>

ajax.js :
Code PHP :
<?php 
function bouger(x, y)
{
var
data = "data_x=" +x+ "&data_y=" +y;
}

var
xml;

if (
window.XMLHttpRequest)
xml = new XMLHttpRequest();
else if (
window.ActiveXObject)
xml = new ActiveXObject('Microsoft.XMLHTTP');
else
alert('JavaScript : votre navigateur ne supporte pas les objets XMLHttpRequest...');

xml.open('POST','../pages/requetes_ajax.php',true);

xml.onreadystatechange = function()
{
if (
xml.readyState == 4 && xml.status == 200)
{
xml.send(data);
}
}

xml.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

requetes_ajax.php :
Code PHP :
<?php
if(!defined('IN_INDEX'))
{
exit(
'<p style="color:red;font-weight:bold;text-align:center;">Vous ne pouvez pas ouvrir ce fichier.</p>');
}

if (isset (
$_POST['data_x']) && isset ($_POST['data_y']))
{
//Sécurisation des variables
$data_x = sec_var($_POST['data_x']);
$data_y = sec_var($_POST['data_y']);

//Récupération d'infos sur le perso
$infos_perso = req_infos_perso($_SESSION['perso_actu']);
$id_perso = $infos_perso['id_perso'];
$coord_x = $infos_perso['coord_x'];
$coord_y = $infos_perso['coord_y'];

//On créé les coordonnées d'arrivée
$data_x = $coord_x + $data_x;
$data_y = $coord_y + $data_y;

if (!
test_case_persos($data_x, $data_y) && !test_case_villes($data_x, $data_y)) //On vérifie que la place est libre
mysql_query("UPDATE persos_cda SET coord_x ='$data_x' AND coord_y ='$data_y' WHERE id_perso ='$id_perso'");
}

Mais rien ne se passe Sad '(j'ai essayé e jouer sur le chemin de requetes_ajax.php, mais rien non plus..)


RE: Ajax, aide svp - Sephi-Chan - 03-11-2007

En fait, tu peux mettre ce que tu veux dans la page appelée par Javascript, et dans la quantité que tu souhaites.

Il faut juste avoir en tête que ce que toute sortie textuelle de la page appelée sera inséré dans la variable Javascript responseText.

C'est comme ça par exemple qu'une carte peut être modifiée sans rechargement apparent de la page. Comme sur sur cette carte. Le fichier PHP qui est appelée quand on clique sur le bouton Update map traite les données envoyées par Javascript, modifie le fichier XML (dans ton cas c'est à MySQL que tu fais appel) et exécute le code qui sert à générer la carte sous sa forme finale, en xHTML.

La page appelée fait donc presque la même chose que la page appelante.

Une fois cette carte générée, on la met à la place de l'ancienne, dans le bloc dont l'id est map. L'utilisateur n'y voit donc que du feu.


Sephi-Chan