+- 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 : Augmentation des ressources sans actualiser (/showthread.php?tid=449)
Augmentation des ressources sans actualiser - P4rk3r - 18-11-2006
Bonjour à toutes et à tous,
Vous avez surement déjà voulu faire un script qui vous donne la possibilité de voir vos ressources augmenter sans avoir le besoin d'actualiser la page. Et bien cela est possible graçe au AJAX qui va vous permettre de lire du PHP sans avoir à acualiser la page.
En faites, on va faire un script JavaScript(coté client) qui permettra de faire appelle au script PHP(coté serveur).
Prérequis :
- Les bases du Javascript (Vous devez connaitre un minimun de connaissance en JavaScript)
Le Script AJAX :
Oki, je vais vous montrer ma fonction ajax qui va vous permettre d'appeller la page php sans actualiser.
ajax.js a écrit :function resRequest() { // On crée la fonction resRequest
var xhr_object = null; // On crée déjà la variable xhr_object
/** On verifie si le navigateur accepte le XMLHttpRequest
if(window.XMLHttpRequest) // Firefox
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
}
xhr_object.open("GET", "ajax.php", true); // On ouvre le script php en designant si on utilisera GET ou POST comme méthode, dans notre cas on va utiliser GET, ensuite on mets le chemin du script php, puis on dit si on veut utiliser l'asynchrone(true) ou le synchrone(false, qui signifie figer le temps de la requete qui risque de bloquer le visiteur) donc on vas prendre l'asynchrone donc on met true.
xhr_object.onreadystatechange = function() { // Si le readyState change alors on execute ce qui est en bas
if(xhr_object.readyState == 4 && xhr_object.status == 200) // Si le readyState vaut 4 ce qui veut dire que les données ont été transmise et si le Status vaut 200 ce qui signifie que le navigateur n'a aucun problème
{
document.getElementById("resId").innerHTML = xhr_object.responseText; // Alors on affiche la reponse du script php dans le div ayant comme id : resId
}
}
xhr_object.send(null); // On envoie rien car on utilise pas la méthode POST
window.setTimeout('resRequest()',1000); // On appelle cette fonction tout es les 1000millisecondes qui vaut 1secondes.
}
Oki je vais expliquer quelques petites choses.
- readyState : C'est le status de la requete
- document.getElementById("resId").innerHTML : C'est pour designer le DIV dans lequelle on va afficher la reponse, dans notre cas c'est resId
- xhr_object.responseText : C'est la reponse du script PHP affiché en Teste
Le Script HTML :
Le Script HTML sera celui qui servira à affiché le resultat, bien sûr ca peut etre une page php ... .
index.html a écrit :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Augmentation des ressources sans actualiser</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body onload="window.setTimeout('resRequest()',1000)">
<div id="resId">
</div>
</body>
</html>
Ca sera entre le div avec comme id resId que sera affiché le resultat du script php.
Le Script PHP :
Bon il faut bien un script en php pour qu'il augmente les ressources et qu'il l'affiche ensuite graçe à une requete dans votre BDD.
Tout d'abord, crée ces tables pour tester déjà ensuite plus tard vous pourrez utiliser les votre.
sql.txt a écrit :CREATE TABLE `ressources` (
`name` VARCHAR( 255 ) NOT NULL ,
`valeur` VARCHAR( 255 ) NOT NULL ,
PRIMARY KEY ( `name` )
) TYPE = MYISAM ;
INSERT INTO `nbaug` ( `name` , `valeur` ) VALUES ('petrole', '500');
Une fois cette table crée avec la ressource petrole alors créez le fichier ajax.php
ajax.php a écrit :<?php
mysql_connect('localhost', 'root', '***'); // On se connecter à la BDD
mysql_select_db('ressources'); // On sélectionne la BDD ressources
$res1 = mysql_query('SELECT*FROM `ressources` WHERE name="petrole"'); // On fait une requete du pétrole
$rows1 = mysql_fetch_array($res1); // On fait un array de la requete
$newval = $rows1['valeur'] + 10; // On crée une variable pour faire [quantité de pétrole actuellemet] + [color=red]10
mysql_query('UPDATE nbraug SET valeur="'.$newval.'" WHERE name="petrole"'); // On met à jour la quantité de pétrole du joueur en ajoutant 10pétroles
echo 'Petrole : '. $rows1['valeur']; // On affiche la quantité de pétrole du joueur
?>
Voilà c'est fini
Vous pouvez dès à présent tester, vous avez un exemple sur http://parkercs.free.fr/augres/
Je remercie http://robloche.free.fr pour son exelent tutoriel d'AJAX.
PS1 : les valeurs en rouge sont des valeurs modifiable !!
PS2 : C'est mon premier tutorial de ma vie donc soyez gentil ^^
Cordialement P4rk3r.
Edit : J'ai oublié de dire qu'il faut attendre un leger moment avant que le résultat s'affiche. Le temps d'attente dépend de la vitesse du serveur.
RE: Augmentation des ressources sans actualiser - Kevin - 26-12-2006
L'aide pour ce tutoriel ce trouve à cette adresse :
http://www.jeuweb.org/board/showthread.php?tid=848