[Coup de coeur] AJAX, ou comment ouvrir une socket avec javascript ...

Salam Alaykoum,
[Si vous faites de la programmation PHP ou autre et que vous êtes curieux de voir comment rendre votre site plus ergonomique et plus optimal continuez à lire, sinon si vous ne comprenez rien à ce que je dis, attendez mon prochain billet concernant l'installation de Ubuntu :-)]
Pour la première fois depuis que j'ai créé ce blog je vais m'éloigner un peu du sujet principal (Ubuntu), ce que d'ailleurs je ferais régulièrement, pour vous parler d'un coup de coeur que j'ai eu: AJAX!
Non, il ne s'agit pas du fameux ajax utilisé pour nettoyer des poêles dégueulasses :-p mais un diminutif de Asynchronous JAvascript and Xml
Je vous le dis tout de suite, vous n'avez pas besoin de connaitre javascript ni xml pour pouvoir utiliser ce procédé, tout ce qu'il faut c'est savoir utiliser les balises html, et savoir coder en php (pour vous tenir en haleine, c'est ce qu'utilise Google dans plusieurs de ses applications comme par éxemple Gmail, AdSense ou encore Analytics...)
La philosophie de ce procédé est de répartir plus équitablement le travail nécéssaire pour afficher (ou plus éxactement actualiser certaines parties d'une) page, entre le serveur et le navigateur de la machine cible, en d'autres termes, le navigateur se charge de voir quelles parties (blocs de balises repérés par des id) ont besoin d'être rechargées, ouvre une connéxion vers le serveur, récupère l'information en fonction de l'id, et l'affiche dans la page, et ce, en arrière plan, sans figer la page et sans que la page toute entière ne soit réactulisée. Ainsi, il y'a un gain considérable de flux de réseau, et la navigation n'en est que plus agréable pour l'utilisateur.
Une idée répandue (et techniquement vraie) est qu'on ne peut ouvrir une socket avec javascript, pourtant le code suivant le fait, certes indirectement, et sans pouvoir controler quoi que ce soit, à travers l'objet cité, mais il le fait et c'est ça le plus important.
Passons à la pratique: Une idée répandue est qu'apprendre AJAX est très difficile, pourtant, avec le petit script qui suit, n'importe qui peut utiliser AJAX sur ses pages sans pour autant être un éxpert de Javascript et même sans connaitre XML en utilisant à la place des pages php qui renvoient un information donnée en fonction du paramètre passé...
Voici deux pages:

Une page php qui se chargera de retourner des informations selon ce qu'on lui passe en paramêtre.
Une page html qui contiendra deux balises div l'une en bleu et l'autre en vert, une troisième balise en rouge contiendra deux liens qui éxécuteront chaqun un script javascript qui se chargera de récupérer de la page php l'information requise et l'afficher soit dans la case bleu ou la case verte, il faut bien comprendre que cette dernière opération se déroulera en arrière-plan sans que la totalité de la page se recharge et sans que la page soit figée, donc qui restera utilisable.

Page index.html:


<html><body>
<script>
function createRequestObject() {
    var ro;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        ro = new XMLHttpRequest();
    }
    return ro;
}
var http = createRequestObject();
function sndReq(action) {
    http.open('get', 'ajax.php?action='+action);
    http.onreadystatechange = handleResponse;
    http.send(null);
}
function handleResponse() {
    if(http.readyState == 4){
        var response = http.responseText;
        var update = new Array();
        if(response.indexOf('|' != -1)) {
            update = response.split('|');
            document.getElementById(update[0]).innerHTML = update[1];
        }
    }
}
</script>
<table border="0">
<tr>
<td id="A1" height="200" width="197" bgcolor="blue" align="center">
</td>
</tr>
<tr>
<td id="B1" bgcolor="green" align="center">
</td>
<td height="350" width="750" bgcolor="red" id="B2" align="center">
<a href="javascript:sndReq('A1')">Afficher un text dans la case bleue</a><br />
<a href="javascript:sndReq('B1')">Afficher un text dans la case verte</a>
</td>
</tr>
</table>
</body></html>
</textarea>

Page ajax.php

<?
  switch($_REQUEST['action']) {
    case 'A1':
      echo "A1|Je suis dans la case bleue";
      break;
    case 'B1':
      echo "B1|je suis dans la case verte";
      break;
  }
?>

Analysons ensemble ce que font ces deux pages :
Dans la page html, il y'a d'abord [lignes 3~12] une fonction qui va se charger de créer l'objet (le truc) qui va se charger de gérer les requetes http (les connéxions au(x) server(s)), cette fonction va seulement voir si elle s'éxécute sur un IE ou un FF (ou autres... ) et charger l'objet corréspondant (sa valeur de retour sera précisément cet objet dans "ro").
[ligne 13] Affecte à la variable "http" l'objet de géstion des requetes http.
[lignes 14~18] Déclaration de la fonction qui va se charger d'envoyer les requetes http, cette fonction utilisera par défaut la méthode GET et se connectera éxclusivement à la page ajax.php en lui envoyant ce qu'elle a reçu en paramètre comme variable get ?action=.
[lignes 19~28] Déclaration de la fonction qui va prendre en main la réponse http, [ligne 20] si la réponse est arrivée (status 4) on l'affecte à la variable "response" sous format text, [ligne 22] on déclare un tableau appelé "update", [ligne 23] si la réponse contient le caractère "|" alors [ligne 24] mettre dans les deux case du tableau "update" les deux parties de la réponse séparées par ce "|", et enfin [ligne 25] modifier dans le code html ce qu'il y'a entre les balises d'"id" = "la première case du tableau" par ce qu'il y'a dans "la deuxième case du tableau".
Il est claire maintenant que l'on va éxécuter la fonction sndReq() avec comme paramère l'"id" de la balise div qu'on veut charger [lignes 39~40], le code js va se charger d'obtenir la page (ajax.php?action=A1) ou (ajax.php?action=B1) et la page php va soit répondre "A1|Je suis dans la case bleue" ou "B1|Je suis dans la case verte", le code js va alors prendre en main cette réponse, la diviser en deux parties séparées par le "|" et actualiser la balise dont l'"id" est "A1" ou "B1" en affichant soit "je suis dans la case bleue" ou "je suis dans la case verte".
Je le redis une dernière fois, cette opération se fait en arrière-plan, sans figer la page, et à la vitesse grand V car la quantité d'information mise en jeu dans le réseau sera infiniment petite comparée à celle qui aurait été transférée si toute la page avait été actualisé.
Maintenant, vous pourrez créer plein de balises avec différents "id" et rendre la page php plus complexe de sorte à pouvoir faire tout et n'importe quoi avec.
J'éspère que j'ai été assez claire, si il y'a des questions?
PS: On voit maintenant qu'il porte bien son nom, AJAX; nettoyeur d'internet lol :)
Source:Rasmus' 30 second AJAX Tutorial

LES COMMENTAIRES (2)

Par Moaaaaaaaaa
posté le 05 février à 18:40

Signaler un abus

Salut ;)

Le crois que tu confond socket et chaussetes ;) a+

Par Guillaume
posté le 27 juillet à 00:44

C'EST LITTERALEMENT ENORME !!!!

Je suis un fan de la première heure de PHP mais bien peu de Javascript (et pour cause, on m'a tjs appris que c'était mal de coder en Javascript, sécurité et tout le blabla, que ça peut être désactivé, etc.) Je croyais également (bêtement) que AJAX c'était du Javascript à coup de XML uniquement donc que je n'y comprendrai surement rien.

Cela dit, à l'heure où j'ai pour obligation de développer un web service en php pour l'unif sans avoir le droit d'installer quoique ce soit sur le client (en gros je n'ai le droit qu'au navigateur déjà installé), j'ai passé des dizaines de technos en revue depuis deux mois sans succès... Sockets, CURL, JAR (mais ça craint), PHP-CLI, JSCRIPT, et tellement plus.

Je crois que la solution est peut etre bien là... Cela te dérange t il le cas échéant si j'échange avec toi sur le sujet si questions ?

Magazine

[Coup de coeur] AJAX, ou comment ouvrir une socket avec javascript ...

LES COMMENTAIRES (2)

A propos de l’auteur

Dossiers Paperblog

LES COMMUNAUTÉS

LES JEUX SUR PAPERBLOG.FR