[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
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 )
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 '(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
|