[AJAX] readyState

Version imprimable

[AJAX] readyState

Salut,

J'ai besoin d'aide concernant l'utilisation de readyState. Je vous donne le code source (voir en bas du message) comme ca vous coomprendrez mieu le problème. Le but est de permettre à l'utilisateur de choisir la province dans une liste déroulante. Le fichier php ne fait que lire la requête qui a comme paramètre le choix qu'a fait l'utilisateur. Ensuite une alerte javascript permet d'afficher le message envoyé par le fichier php càd la valeur du choix du client. Maintenant la première ligne de stateChanged() est mise en commentaire, et c'est la le problème la deuxième alerte qui est sensée s'afficher ne s'affiche pas. Par contre si j'enlève les commentaire de cette ligne tout marche bien. Avez vous une suggestion?

Merci

Client:
=====

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
71
72
73
74
75
76
77
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>Ajax - PHP example</title>
 
</head>
<body>
<script language="javascript" type="text/javascript">
<!--
     function showCity(prcode)
	 {
	 	xmlHttp = GetXmlHttpObject();
	 	url = "getcities.php";
	 	url=url+"?q="+prcode;
	 	url=url+"&sid="+Math.random();
	 	xmlHttp.open("GET", url,true);
	 	xmlHttp.send(null);
	 	xmlHttp.onreadystatechange = stateChanged();
	 }
 
	 function GetXmlHttpObject()
	 {
	 var xmlHttp=null;
	 try {
	   // Firefox, Opera 8.0+, Safari
	   xmlHttp=new XMLHttpRequest();
	 }
	 catch (e) {
	   // Internet Explorer
	   try{
	     xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	   }
	   catch (e) {
	   	try {
	     	      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	         }
	         catch (e) {
	           alert("Your browser does not support AJAX!");
	           return false;
	         }
	   }
	 }
	 return xmlHttp;
	 }
 
	 function stateChanged()
	 {
	 	//alert("executing stateChanged()");
	 	if(xmlHttp.readyState==4)  {
	   		alert("the response from the server: " + xmlHttp.responseText);
	   	}
	 }
-->
</script>
<form>
<select name="province" size="1" onChange = "showCity(this.value);">
	<option value="0">Choose province</option>
	<option value="1">Alberta</option>
	<option value="2">British Columbia</option>
	<option value="3">Manitoba</option>
	<option value="4">New Brunswick</option>
	<option value="5">Newfoundland</option>
	<option value="6">Northwest Territories</option>
	<option value="7">Nova Scotia</option>
	<option value="8">Nonavut</option>
	<option value="9">Ontario</option>
	<option value="10">Prince Edward Island</option>
	<option value="11">Quebec</option>
	<option value="12">Saskatchewan</option>
	<option value="13">Yukon</option>
</select>
</form>
</body>
</html>

serveur (getcities.php):
=================

Code:

1
2
3
4
<?php
$q=$_GET["q"];
echo "the quey is $q";
?>

21/12/2007, 14h14
E.Bzz
Bonjour,

Citation:

Envoyé par helpcomm

Avez vous une suggestion?

ton alert() doit bloquer le fonctionnement du onreadystatechange qui récupère en dynamique l'état d'avancement de la requête Ajax.
Essaye
Code:

1 2 3 4 5 6 7 8 9 function stateChanged() { if(xmlHttp.readyState==4) { alert("the response from the server: " + xmlHttp.responseText); } else { alert("Etat actuel : " + xmlHttp.readyState); } }
Mais pas sûr que ça résolve le problème : ton alert() bloquera quand même le fonctionnement avant la bonne fin de ta requête Ajax ...

Plutôt qu'une alert(), essaye plutôt un

Code:

document.getElementById('id_d_un_div').innerHTML += "Etat actuel : " + xmlHttp.readyState + "<br />";

Il n'y aura ainsi plus de blocage du script ...

A+
22/12/2007, 07h32
helpcomm

Salut,

Merci pour la réponse mais je n'arrive pas à faire fonctionner ça correctement. J'envoie la dernière partie du code (c'est la partie modifiée en fait). Tout ce que j'arrive à afficher c'est la première ligne que j'ai mise en commentaire qui affiche tout le temps l'état 1. Apparement l'état n'arrive jamais à 4.

Toute suggestion est la bienvenue.

Merci

========

function stateChanged()
{
//document.getElementById('txtHint').innerHTML += "Etat actuel : " + xmlHttp.readyState + "<br />";
if(xmlHttp.readyState==4) {
document.getElementById('txtHint').innerHTML += "Etat actuel : " + xmlHttp.readyState + "<br />";
}
}
-->
</script>
<form>
<select name="province" size="1" onChange = "showCity(this.value);">
<option value="0">Choose province</option>
<option value="1">Alberta</option>
<option value="2">British Columbia</option>
<option value="3">Manitoba</option>
<option value="4">New Brunswick</option>
<option value="5">Newfoundland</option>
<option value="6">Northwest Territories</option>
<option value="7">Nova Scotia</option>
<option value="8">Nonavut</option>
<option value="9">Ontario</option>
<option value="10">Prince Edward Island</option>
<option value="11">Quebec</option>
<option value="12">Saskatchewan</option>
<option value="13">Yukon</option>
</select>

<div id="txtHint"></div>
</form>
</body>
</html>
22/12/2007, 08h00
helpcomm

J'ai trouvé l'erreur. c'était l'appel de la fonction de changement d'état qui n'était pas correct. il fallait garder la fonction comme suit: xmlHttp.onreadystatechange=function().

Merci