[PHP-JS] Communication asynchrone entre un traitement php et un popup

Version imprimable

27/09/2006, 09h37
zax-tfh

[PHP-JS] Communication asynchrone entre un traitement php et un popup

Bonjour,

Je suis actuellement à la recherche de quelque chose, je suis sur une piste mais je ne suis pas sur... j'aimerai donc avoir vos avis pour etre sur de ne pas faire fausse route svp.
Voila ce que je cherche à faire :

Lors d'un traitement php (assez long), je souhaite afficher un popup qui affiche l'etat de progression (durant le traitement, j'ai plusieurs étapes qui seront décrites sur le popup). Ce que je cherche à faire c'est que durant ce traitement, je puisse communiquer au popup que l'on passe à l'etape suivante. Le probleme, vu que j'ai fait un essai en javascript, c'est qu'il faut attendre la fin pour que le flux html soit envoyé et donc les passages sont faits une fois le traitement terminé :(

Donc pour pouvoir communiquer de façon asynchrone, j'avais pensé aux principes AJAX mais je ne suis pas sur et je ne sais pas trop vers quelle voie me tourner sur toutes les choses existantes à ce sujet.
Pourriez vous me dire si je suis dans le vrai et si eventuellement vous connaissez un bon tuto pour ce principe, n'hesitez pas ;)

Merci d'avance
@ bientot
27/09/2006, 10h08
dam_moreyllo

Bonjour,

La seule méthode que je vois, c'est effectivement avec AJAX. Mais cela dépend de si ton traitement php se fait réellement en plusieurs étapes...

Quand tu ouvre ta pop-up, le javascript lance a l'aide d'AJAX le premier fichier php (qui correspond à la première étape) qui retourne en xml ce dont aura besoin la deuxième étape pour fonctionner. Pendant ce temps l'ajax affiche un message d'attente.
Une fois que cette première étape est terminé, le javascript affiche "première étape terminée", puis lance le deuxième fichier php en donnant en argument ce qu'a retourné le premier fichier php.
Et ainsi de suite...

C'est la seule méthode qui me viens à l'esprit mais elle est peut être un peu contraignante...

Pour les tutos sur Ajax, ceux sur dvp sont pas mal ;)
27/09/2006, 10h32
zax-tfh

salut ptitskippy

Merci pour ta réponse, et je comprend deja un peu mieux le processus. Sauf que le probleme c'est qu'il est trop contraignant vis à vis de ce que j'ai actuellement, je t'explique :

Grosso modo, j'upload une image et je créé 4 images de dimensions differentes à partir de celle ci.
ce traitement se trouve dans une classe php.
En gros, j'aurais aimé faire comme suit au sein du fichier de ma classe :

la_methode_de_traitement
{
ouvrir le popup et inscrire "etape 1"
traitement php 1
modifier le popup et inscrire "etape 2"
traitement php 2
modifier le popup et inscrire "etape 3"
traitement php 3
modifier le popup et inscrire "etape 4"
traitement php 4
fermer le popup.
}

Je ne sais pas si on peut faire ce genre de traitement asynchrone avec ajax... une idée ?
Je vais aller voir le tuto mais ma connec web au taf est très limitée donc je risque de ne pas forcement pouvoir bien me renseigner :(
Merci en tout cas

@++

Et tu peux pas avoir dans ta classe un truc comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
 
premiereEtape() {
   // traitement première étape
}
deuxiemeEtape() {
   // traitement deuxième étape
}
troisiemeEtape() {
   // traitement troisième étape
}

ensuite tu crée pour chaque étape un fichier avec dedans :

Code:

1
2
3
4
5
6
7
8
 
// fichier premiereEtape.php
header('Content-Type: text/xml;charset=utf-8');
$c = new TaClasse();
$res = $c->premiereEtape();
echo utf8_decode('<?xml version='1.0' encoding='UTF-8' ?>');
echo utf8_decode('<resultat a="'.$res["a"].'" b="'.$res["b"].'" ... />');
// La tu construit ton xml comme tu veux, c'est juste un exemple

Ensuite, DANS ta pop up, que tu peux pas lancer en php, mais en javascript, tu execute ces fichiers a l'aide d'ajax :

Code:

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
var connexion = null;

function premiereEtape() {
   if (connexion != null && connexion.readyState != 0) {
      // Une requête est en train d'être effectuée => on l'aborte car une nouvelle
      // va être executée
      connexion.abort();
   }
   connexion = getConnexion();
   if (connexion != null) {
      // Lancement de la première étape
      connexion.open("GET", "premiereEtape.php", true);
      // Affecte un evenement à connexion : lorsque la requête a finie d'être
      // executée, on lance la deuxième étape
      connexion.onreadystatechange = function () {
         if (connexion.readyState == 4 && connexion.responseXML) {
             // Ceci est executé que lorsque le fichier premiereEtape.php
             // a terminé son traitement

             // Affichage du message de fin de la première étape :
             document.getElementById("avancement").innerHTML += "<br>Etape 1 terminée";
             // Lancement de la deuxième étape :
             var res = connexion.responseXML.getElementsByTagName("resultat")[0];
             deuxiemeEtape(res.getAttribute("a"), res.getAttribute("b"));
         }
      };
   }
   // Envoi de la requête :
   connexion.send(null);

  // Affichage du message disant que la première étape est en cours :
  document.getElementById("avancement").innerHTML += "Etape 1 en cours";
}

function deuxiemeEtape(a, b) {
   // A peu pres le même code que premiereEtape
   // Sauf :
   connexion.open("GET", "deuxiemeEtape.php?a=" + a + "&b=" + b, true);
}

// Fonction qui retourne un objet permettant de dialoguer directement avec le serveur
function getConnexion() {
   var c = null;
   if (window.XMLHttpRequest) {
      // Pour Firefox et autres :
      c = new XMLHttpRequest();
   }
   else if (window.ActiveXObject) {
      // Pour IE :
      try {
         // Première solution :
         c = new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (e) {
         try {
            // Seconde solution :
            c = new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch (e) {
            c = null;
         }
      }
   }
   if (c == null) {
      // AJAX non supporté par le navigateur
      alert("Votre navigateur ne supporte pas certaines fonctionnalités de cette page.\nVous rencontrerez donc peut être des problèmes.");
   }
   return c;
}

Dans ton HTML tu as un bouton qui permet d'ouvrir la popup :

Code:

1
2
 
<input type="button" onclick="window.open("traitementEnCours.html", ...)"

Et enfin dans traitementEnCours.html tu as :

Code:

1
2
3
4
 
<body onload="premiereEtape()">
   <div id="avancement"><!-- la ou sont affichés les messages--></div>
</body>