Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Qu'est-ce qu'AJAX ? Eh bien, selon
Wikipedia,
Citation : WikipediaÀ l'image de DHTML ou de LAMP, AJAX n'est pas une technologie en elle-même, mais un terme qui évoque l'utilisation conjointe d'un ensemble de technologies couramment utilisées sur le Web :
- HTML (ou XHTML) et CSS pour la présentation des informations ;
- DOM et JavaScript pour afficher et interagir dynamiquement avec l'information présentée ;
- XML, XSLT et l'objet XMLHttpRequest pour échanger et manipuler les données de manière asynchrone avec le serveur web. Les applications AJAX peuvent aussi utiliser d'autres technologies, comme le HTML pré-formaté, les fichiers texte plats, JSON et JSON-RPC comme alternatives à XML/XSLT.
Voici
un tuto fait par un zéro, expliquant plus en profondeur le fonctionnement d'Ajax. Pour ceux qui s'intéressent de plus près aux utilisations de
Ajax,
il y a un très bon tuto ici (dont je me suis inspiré pour faire le code de celui qui se trouve ci-dessous).
Nous allons ici nous servir d'
Ajax pour "importer" une autre page. En fait, nous allons chercher ici ce qu'affiche une autre page web, en lui envoyant au passage quelques informations. Quel est l'intérêt pour notre chat ? L'intérêt se fera ressentir en temps voulu.
Exemple
Bon : comme pour les sockets, je te montre un code qu'on va décortiquer par la suite.
Code : HTML1
2
3
4 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Chat</title>
<script type="text/javascript">
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37 | function plop()
{
var xhr_object = null;
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;
}
}
var method = "POST";
var filename = "reponse.php";
var requete = "message=cornemuses";
xhr_object.onreadystatechange = function()
{
if(xhr_object.readyState == 4)
{
var reponse = xhr_object.responseText;
document.getElementById("content").innerHTML = reponse;
}
}
xhr_object.open(method, filename, true);
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr_object.send(requete);
}
|
1
2
3
4 | </script></head>
<body onLoad="plop()">
<div id="content"></div>
</body></html>
|
Puis, dans le même répertoire que la page ci-dessus, créons une page
reponse.php, contenant :
Code : Autre1
| Moi j'aime pas les <police nom="courrier"><?php echo $_POST['message'] ; ?></police> |
Étudions le code :
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14 | var xhr_object = null;
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;
}
}
|
Ici, on va créer un objet
XMLHttpRequest, comme pour les images ou les sockets en PHP, ici c'est un
XMLHttpRequest (souviens-toi qu'on peut tout mettre dans une variable).
On regarde ensuite si l'utilisateur a Firefox ou Internet explorer, et dans le cas où il a Internet Explorer, on vérifie qu'
il ait bien activé les activeX. Si ces conditions ne sont pas remplies, alors le script s'arrête ici.
Code : JavaScript1
2
3 | var method = "POST";
var filename = "reponse.php";
var requete = "message=cornemuses";
|
Ici, on définit premièrement la méthode d'envoi des données que l'on va envoyer à la page à includer (il y a
POST ou
GET)
Ici, on utilisera POST ; cependant, on peut très bien utiliser GET : il suffirait de mettre la valeur de method, et de remplacer filename par filename + = '?' + requete , et de supprimer xhr_object.send(requete);.
Ensuite, on définit la page à "includer", et enfin, on choisit le message à envoyer.
Si la page includée contient $_POST['message'], il sera affiché "cornemuse". Si on avait écrit var requete = "pif=paf&paf=pif"; , alors echo $_POST['pif'] aurait donné "paf", et vice-versa.
Code : JavaScript1
2
3
4
5
6
7
8 | xhr_object.onreadystatechange = function()
{
if(xhr_object.readyState == 4)
{
var reponse = xhr_object.responseText;
document.getElementById("content").innerHTML = reponse;
}
}
|
L'attribut
readyState de
xhr_objet correspond au transfert effectué des données : il prendra successivement les valeurs de 0 à 5. Voici ce que cela signifie :
- 0 : aucune donnée transférée
- 1 : début du transfert
- 3 : transfert achevé
- 4 : on a un accès partiel aux données transférées
- 5 : on a un accès total aux données transférées.
Donc, dans cette portion de code, on crée une fonction qui dit au navigateur d'ajouter les données affichées par
reception.php dans le
div qui a pour id "
content" dès qu'il y a un changement.
Code : JavaScript1
2
3
4
5 | xhr_object.open(method, filename, true);
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr_object.send(requete);
|
On ouvre la page
reception.php, on envoie le
header puis la requête.
Exécute le script et bidouille-le, tu verras qu'il n'y a rien de dur, même pour un débutant en JavaScript.
Voilà pour cette brève explication d'Ajax : je rappelle que je n'ai pas pour but d'expliquer en profondeur le fonctionnement d'Ajax, mais juste ce dont on va se servir pour le chat.
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
) ne sont pas requises, tu comprendras en voyant le code.
75 Zéros connectés |
8 requêtes |
0.0435s (0.0321s)
