- rFactor
- rFactor Session Manager
- Classements des joueurs de la GameZone
- Colin Mac Rae 4 : Circuits - Voitures - Pilotes
- F1 Challenge : Circuits - Voitures - Pilotes
- Mario Kart Cube : Circuits - Voitures - Pilotes
- rFactor : Circuits - Voitures - Pilotes
- Richard Burns Rally : Circuits - Voitures - Pilotes
- Trackmania : Circuits - Voitures - Pilotes
- TrackMania Forever : Circuits - Voitures - Pilotes
- Trackmania Sunrise : Circuits - Voitures - Pilotes
- Historique des chronos
- Derniers chronos enregistrés
- Circuits rFactor les plus populaires
AJAX (Asynchronous JavaScript And XML)
Définition
L'AJAX est une méthode de développement d'application Web. Il permet d'augmenter l'interactivité des pages web et de gagner en temps de chargement.
En résumé, une application web traditionnelle est conçue avec des formulaires qui sont postés vers le serveurs qui traite les demandes et renvoie des pages au client. Chaque formulaire est "téléchargé" sur le client pour être rempli et ensuite envoyé au serveur pour traitement. Cette méthode pose vite des soucis comme présenter un formulaire dont 2 listes de choix sont liées. La sélection d'un item dans une liste met à jour la deuxième sans poster tout le formulaire. C'est là qu'AJAX intervient !
Historique
Apparu dès 1999 avec l'utilisation de l'objet XMLHttpRequest présent dans Internet Explorer 5. Cet objet fut ensuite supporté par les autres navigateurs et cela permis l'essort de l'utilisation d'AJAX. Aujourd'hui de très nombreux sites l'utilisent et l'on parle de web 2.0.
Exemples
Exemple 1a - Méthode GET
|
|
Zone "DIV" de la page |
Exemple 1b - Méthode POST
Exemple 2
Dans ce petit exemple (extrait de la GameZone de ce site), vous pouvez découvrir un formulaire dont les listes déroulantes sont liées. Voir l'exemple...
Ce formulaire permet aux utilisateurs de la GameZone de saisir leurs temps.
Avantage d'AJAX dans ce cas, aucuns aller-retours client-serveur fastidieux !
Comment ca marche ?
En fait, rien de bien méchant. Il y a du code côté client (javascript) et du code côté serveur (php dans notre cas).
Lors d'un événement dans le formulaire, par exemple le choix d'un item dans une liste déroulante, du code javascript est exécuté. Ce code, par le biais de l'objet XMLHttpRequest, va appeler une page php (en arrière plan) et capturer la réponse de cette page (code HTML). Ensuite ce code HTML capturé par javascript est ajouté dans le contenu de la page courante.
Pour mettre en oeuvre tout ceci, nous avons donc besoin :
- de code javascript,
- de pages dynamiques côté serveur (php, asp, asp.net, etc.),
- d'utiliser des balises DIV afin de remplir dynamiquement leur contenu avec javascript.
Code javascript
function getHTTPObject() {
var xmlhttp=false;
if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest();
else if (window.ActiveXObject) {
try {xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");}
catch(e) {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
}
return xmlhttp;
}
function handleHttpResponse(zonediv, objhttp) {
if (objhttp.readyState == 4) {
document.getElementById(zonediv).innerHTML = unescape(objhttp.responseText);
}
}
function ChargeZone(url, zonediv) {
var http = getHTTPObject();
http.open("GET", url + "&nocache=" + Math.random(), true);
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
http.onreadystatechange = function() { handleHttpResponse(zonediv, http); }
http.send(null);
}
Dans votre page il suffit de placer une balise DIV avec un id
Enfin, l'événement javascript (comme la sélection d'un item) appelera la fonction de mise à jour
Le code HTML renvoyé par la page page.php sera inséré dans la zone DIV.
Simple non ?
