Discussion :

[whitespirit]

Bonjour,

Une question basique mais nécessaire pour ma compréhension de Ajax : quand on envoie une requete comme dans l'exemple ci-dessus, comment le navigateur va pouvoir retourner l'information (donc le contenu du fichier reponse.txt) au bon objet XMLHttpRequest ? C'est le truc qui m'échappe, comment un évènement asynchrone va pouvoir retrouver l'objet qu'il a appelé, ce qu'il doit faire ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
    xhr.open("GET", "http://gael-donat.developpez.com/web/intro-ajax/reponse.txt", false);
    xhr.send(null);
 
    alert(xhr.responseText);

Je n'ai peut-être pas utilisé les bons termes car je débute dans l'Ajax.

Merci d'avance

[E.Bzz]

Bonjour,

C'est le truc qui m'échappe, comment un évènement asynchrone va pouvoir retrouver l'objet qu'il a appelé, ce qu'il doit faire ?

la notion synchrone/asynchrone ne concerne que le navigateur (qui sait, lui, qu'il attend une réponse), pas le serveur.
L'échange (et donc la réponse) est traité comme une requête http classique par le serveur ...

EDIT : tu peux d'ailleurs taper l'adresse appelée par Ajax directement dans la barre d'adresse du nav et obtenir la même réponse : c'est un bon test pour débugger la partie PHP de ton traitement (pour vérifier que le responseText te renvoie effectivement ce que tu attendais)

A+

[Stumi]

Moi aussi j'ai une petite question,
En ajax, si on veut transformer une requete asynchrone en requete synchrone comment fait on? Est ce que c'est en jouant avec les attributs de la requete (onreadystatechange) ?
Pour ma part, je fais une XHR appellant un script php (écriture dans un fichier). Est ce que la réponse de cette requete sera les echo que tu peux mettre dans ton script php ?
Merci de m'aider .

[E.Bzz]

En ajax, si on veut transformer une requete asynchrone en requete synchrone comment fait on? Est ce que c'est en jouant avec les attributs de la requete (onreadystatechange) ?
Pour ma part, je fais une XHR appellant un script php (écriture dans un fichier). Est ce que la réponse de cette requete sera les echo que tu peux mettre dans ton script php ?

Mieux vaut de bons tutos que de longs discours

[whitespirit]

Pour simplifier, lorsque j'envoie une requête ajax, je demande le fichier .php défini dans l'objet XHR, et suivant qu'il s'agit d'un post/get celui va s'exécuter comme n'importe quel fichier.

A ce moment mon navigateur attends un "header" qui a été défini et qui sera retourner par le serveur (correspondant au résultat transmis par le fichier php appelé) ??

Lorsque le navigateur reçoit un "header", il regarde a quel ... heu... ben quand il fait pour savoir à qui appartient le résultat à transmettre ?

Ces questions peuvent sembler inutile mais mon cerveau fonctionne d'une façon bizarre : j'ai vraiment (ce n'est pas un caprice) de comprendre comment ça fonctionne concrètement la transaction entre ajax et mon serveur web.

Voilà, étant donné que je commence tout juste et malgré les tutoriels que j'ai pu exécuter je n'ai pas trouvé de réponse à ce sujet. Est-ce que tout ça est plus relié au protocole HTTP ? Il faut dire que concrètement je ne vois pas à quoi correspond une entête. Entre temps je vais me documenter dessus.

[E.Bzz]

Lorsque le navigateur reçoit un "header", il regarde a quel ... heu... ben quand il fait pour savoir à qui appartient le résultat à transmettre ?

Losque tu fais ton appel Ajax, tu instancies un objet XHR (tu peux même en avoir plusieurs en parallèle) : c'est lui qui permet au nav de renvoyer "la bonne réponse à la bonne question".

Voilà, étant donné que je commence tout juste et malgré les tutoriels que j'ai pu exécuter je n'ai pas trouvé de réponse à ce sujet.

Cette réponse concernait Stumi, qui semble avoir besoin de lecture

A+

[Stumi]

En faite j'ai pas trop commencé a voir comment marché le mode synchrone parce que je ne suis pas sûr que cela résolve mon problème.
En faite mon but est de lancer plusieurs requetes XHR qui appellent des script php qui ont pour mission d'écrire dans un fichier (en gros je recré un fichier svg à partir d'un ancien). Le problème étant qu'il y a plus d'une centaine de requetes XHR qui sont lancées (en asynchrone). Et du coup, comme les traitement php n'ont pas le même temps d'execution, l'écriture dans le fichier ne se fait absolument pas dans l'ordre que j'avais "algorithmiquement" prévu.
C'est pourquoi je me demande si en faisant des requetes synchrones, et donc en attendant la réponse du serveur, les scripts vont s'executer dans le bonne ordre ? (cf : le post de ce matin : http://www.developpez.net/forums/sho...d.php?t=590659)

[Scarz]

Tout d'abord bonjour à toutes et à tous...

Je ne vais pas commencer à refaire un tuto ici mais juste reprendre les bases

Pour faire un appel asynchrone, il faut suivre les étapes suivantes:
- créer un xhr (new XMLHttpRequest)
- ouvrir le xhr avec l'url souhaitée(xhr.open)
- envoyer la requete via le xhr (xhr.send)
- ecouter le statut de retoure du xhr et lui indiquer que faire quand il recoit la reponse (xhr.onreadystatechange)

Toutes ses étapes se retrouvent dans tous les script ajax de tous les tutos.


Il t'es donc possible de lancer 100 requêtes Ajax en parallèle mais aussi en sequentiel.

Avant de t'expliquer comment procéder... je tiens a attire ton attention sur le fait que si tu lance plusieurs requêtes Ajax, il te sera impératif de recréer ton XHR, ne fais pas juste des nouveaux open et send sur un XMLHttpRequest déjà instancié et utilisé, cela et source d'erreur et de conflit.


Maintenant voici comment proceder pour faire tes appels ajax en sequentiel.

Au lieu de faire une boucle qui va envoyer toutes tes requêtes d'un coup...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
for (var i = 0; i < mesRequettes.length; i++) {
    envoyerRequettes(mesRequettes[i]);
}

Il te suffit de faire l'appel à ta fonction d'envoi pour la requête suivante dans la fonction onreadystatechange.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
processStateChange() {
    if (xhr.readyState == 4) { // Complete
        if (xhr.status == 200) { // OK response
            envoyerRequettes(mesRequettes[i]);
            i++;
        } else {
            alert("Problem with server response :\n " + xhr.statusText);
        }
    }
}

Tu n'as plus qu'à appeler la première requête de la manière suivante

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var i = 0;
envoyerRequettes(mesRequettes[i]);

Et dans ce cas la, tes appels se feront en séquentiel. En revanche, ce qui peut devenir problématique c'est que si la page web gérant ce module d'appels séquentiels vient à se couper, ton processus se coupe lui aussi.


Pour ce qui est de la compréhension exacte du mécanisme de Ajax, je vous conseille de faire un petit peu de lecture, ne serai que des articles publiés sur developpez.net


Bonne journée à toutes et à tous.

A bientot pour de nouvelles aventures.
Scarz

[E.Bzz]

Maintenant voici comment proceder pour faire tes appels ajax en sequentiel.

Au lieu de faire une boucle qui va envoyer toutes tes requêtes d'un coup...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
for (var i = 0; i < mesRequettes.length; i++) {
    envoyerRequettes(mesRequettes[i]);
}

Il te suffit de faire l'appel à ta fonction d'envoi pour la requête suivante dans la fonction onreadystatechange.

Merci Scarz, pour ces explications détaillées

Seuls bémols que j'apporterais :
* tu ne présentes qu'un mode de fonctionnement du mode asynchrone (la requête suivante peut très bien être lancée autrement qu'à partir du onreadystatechange de la précédente)
* l'utilisation du mode synchrone permet de très largement simplifier l'exemple que tu donnes.

Et n'oublie pas que, quelque soit la "meilleure" solution théorique, un développeur n'a pas toujours le choix de l'appliquer (outre le fait qu'elle peut être la meilleure dans un cas mais pas dans un autre).
Aussi, mieux vaut toujours garder en tête qu'il y a, la plupart du temps, plusieurs façons d'obtenir un même résultat, afin le moment venu, de pouvoir arbitrer entre "le mieux", "le souhaitable" et "le possible" en toute connaissance de cause

A+

[whitespirit]

Merci beaucoup pour ces explications.

Entre temps, je me suis plus penché sur le protocole HTTP/1.1, c'était un point important qu'il me manquait pour les compréhensions dont j'ai besoin. Maintenant tout est plus clair car je n'avais pas bien cerné cette histoire de headers et de request/response. D'ailleurs ces recherches ne m'ont pas été utile que pour l'ajax mais pour ce qui concerne le routage/sécurité/attaques côté serveur.

Il me manque toutefois certain points à comprendre et surtout mettre en application tout ça. Maintenant ma principale préoccupation concerne l'organisation et structure de mon application.

Merci beaucoup de vos réponses.