[AJAX] valeurs de readystate

Version imprimable

13/01/2012, 14h01
loustalet

[AJAX] valeurs de readystate

Bonjour,

Je cherche à avoir une confirmation des valeurs du readystate et de ce que j'ai compris. Je n'ai pas vu grand chose sur la toile à ce sujet.
d'après mes tests :
Mode synchrone la valeur de readystate passe de 1 à 4 (que le script serveur renvoie ou non quelque chose au navigateur)
mode asynchrone la valeur passe de 1à 4 si le script renvoie qq chose au navigateur et 1,2, 4 si le script serveur ne renvoie rien. Je travaille sur firefox.
Si mon raisonnement est faux, merci pour les explications ou les liens vers ces explications.
13/01/2012, 14h20
Bovino
Les valeurs possibles de readyState sont :
- 0 : la connexion n'a pas été initialisée (création de l'objet xhr) ;
- 1 : la connexion a été initialisée (méthode open()) ;
- 2 : les données ont été envoyées (methode send()) ;
- 3 : les serveur commence à envoyer les résultats ;
- 4 : le serveur a fini d'envoyer les résultats.
Seulement, si le résultat n'est renvoyé qu'en un seul paquet, les états 3 et 4 sont identiques, donc le 3 est inutile dans ce cas.
13/01/2012, 15h14
loustalet

Merci pour la réponse, mais est-ce que le séquencement des états est le même en mode synchrone ou asynchrone ?
Et pourquoi en mode synchrone je ne voi pas le 2 (send). j'ai mis une temporisation côté serveur pour justement que les états apparaissent de façon claire.
Par ailleurs l'état 1 apparaît deux fois dans la plupart des cas .....
n'y at-il pas une histoire de cache ???

Un petit exemple pour (peut-être... :?) mieux comprendre :

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
<!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</title>
</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>
	<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(){
				if(xhr.readyState != currentState){
					currentState = xhr.readyState;
					ready.innerHTML += 'readyState : ' + currentState + '<br />';
				}
				if(xhr.readyState > 2){
					result.innerHTML = xhr.responseText;
				}
				if(xhr.readyState == 4){
					elem.disabled = false;
					elem2.disabled = false;
				}
			}
			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';
?>

Tester en ligne : http://dmouronval.developpez.com/readyState/

13/01/2012, 16h44
loustalet

Merci pour ton exemple très intéressant.
Deux remarques :
- var async = !!isAsync, currentState : quel est l'intérêt d'inversre deux fois le sens de isAsync ?
- pour moi les boutons sont inversés .... le synchrone fait de l'asynchrone et vice versa. ... et cela viendrait de tes deux ! dans la déclaration de async

Et si je ne me trompe pas le mode synchrone ne peut tout simplement pas afficher les états 2 et 3 car il est toujours en attente de la réponse du serveur et ne peut donc faire ses innerHtml pour les états 2 et 3 !

Sauf erreur de ma part....
merci pour la confirmation !

Citation:

Envoyé par loustalet

- var async = !!isAsync, currentState : quel est l'intérêt d'inversre deux fois le sens de isAsync ?

le double ! te permets d'initialiser la variable à false si aucune valeur de isAsync n'est présente, ce qui est le cas de par la méthode d'appel, elem.onclick = requete;.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function test( isAsync){ var async = !!isAsync; alert(async); } function testSans( isAsync){ var async = !isAsync; alert(async); } test(); test(false); test(true); testSans(); testSans(false); testSans(true);
[EDIT]
D'une manière générale, l'instruction !! permet d'obtenir un boolean à partir de n'importe quelle valeur.