[AJAX] valeurs de readystate

**loustalet** · 13/01/2012, 14h01

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.

**Bovino** · 13/01/2012, 14h20

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.

**loustalet** · 13/01/2012, 15h14

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 ???

**Bovino** · 13/01/2012, 15h45

Un petit exemple pour (peut-être...

) mieux comprendre :

Code :

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

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>

et

Code php :

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

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/

**loustalet** · 13/01/2012, 16h44

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 !

**NoSmoking** · 15/01/2012, 15h22

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 :

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

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.

[AJAX] valeurs de readystate

AJAX

Discussions similaires

Partager

Partager