[AJAX] Appel asynchrone avec barre de progression

Bonjour à tous,

J'aimerais faire un service PHP, appelable en JS de manière asynchrone, et afficher une barre de progression de l'opération en cours.

Comment m'y prendre ?

Est-ce que c'est le même service PHP qui renvoie des données régulièrement à JS ? Ou dois-je stocker, par exemple en session, des informations d'avancement consultables via un autre service PHP et faire des appels JS régulièrement pour accéder à ces données ?

Pour le moment je cherche juste à connaître le bon design à utiliser, après pour le code c'est pas un soucis, mais si vous avez des exemples ce serait cool ;)

Bonne journée à vous,

A bientôt

Ah tiens, ça me rappelle un use case sur le readyState 3 que j'avais fait fut un temps.
Le principe : envoyer à l'aide de flush séparés de sleep des morceaux de contenu et les traiter.
Le code :

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
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<style type="text/css">
                #resultat{
                        border: 1px solid black;
                        padding: 10px;
                        background-color: #EEEEEE;
                        min-height: 1em;
                        margin-top: 0;
                }
        </style>
	<title>readyState 3</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
	<p><button id="lancer">Lancer la requête (synchrone)</button><button id="lancer2">Lancer la requête (asynchrone)</button></p>
	<div id="readystate"></div>
	<p id="resultat"></p>
 
		<h3></h3>
	<div id="responseText"></div>
	<script>
                var elem = document.getElementById('lancer'),
                        elem2 = document.getElementById('lancer2'),
                        result = document.getElementById('resultat'),
                        ready = document.getElementById('readystate');
                elem.onclick = requete;
                elem2.onclick = requeteFalse;
                function requeteFalse(){
                        requete(false);
                }
                function requete(isAsync){
                        var async = !!isAsync,
                                currentState;
                        elem.disabled = true;
                        elem2.disabled = true;
                        result.innerHTML = '';
                        ready.innerHTML = '';
                        var xhr = new XMLHttpRequest();
                        ready.innerHTML += 'readyState : ' + xhr.readyState + '<br />';
                        xhr.open('post','ajax.php',async);
                        xhr.onreadystatechange = function(){
                                console.info('readyState : ' + xhr.readyState);
                                if(xhr.readyState !== currentState){
                                        currentState = xhr.readyState;
                                        ready.innerHTML += 'readyState : ' + currentState + '<br />';
                                }
                                if(xhr.readyState == 3){
                                        result.innerHTML = xhr.responseText;
                                }
                                if(xhr.readyState == 4){
                                        elem.disabled = false;
                                        elem2.disabled = false;
                                        document.getElementById('responseText').innerHTML = xhr.responseText;
                                }
                        };
                        xhr.send(null);
                }
        </script>
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
	sleep(1);
	echo 'Début';
    ob_flush(); 
	flush();
	sleep(1);
	echo '<br />';
	for($i = 0; $i < 20; $i++){
		echo '.';
		ob_flush(); 
		flush();
		usleep(100000);
	}
	sleep(1);
	echo '<br />Fin';
?>

:arrow: Un exemple en ligne.
Tu peux t'en inspirer pour ta barre de progression. ;)

Ok je vois le principe.

Pour info, le bouton "synchrone" lance la requête en asynchrone, et inversement ;)

Merci beaucoup pour le tuyau,

A bientôt

:aie:

Bien vu, pourtant, c'est pas faute d'avoir cliqué dessus je ne sais combien de fois et j'avais même pas fait gaffe !
C'est corrigé.

:merci: