[AJAX] je comprends rien en ajax.. aucune alert ne fonctionne..

**Marc22** · 22/02/2010, 15h31

Bonjour je suis débutant et désespéré également, de ne pas parvenir à faire la moindre avec l'objet xmlhttprequest.......

J'ai tenté de faire un code simple pour commencer mais apparemment...

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
<!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>	
<script type='text/javascript' language="javascript" >
 
	 function getXhr(){
		var xhr = null; 
 
		if(window.XMLHttpRequest) // Firefox et autres
		   {xhr = new XMLHttpRequest(); }
		else if(window.ActiveXObject){ // Internet Explorer 
		   try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
				}catch (e) {xhr = new ActiveXObject("Microsoft.XMLHTTP");}
		}
		else { // XMLHttpRequest non supporté par le navigateur 
				alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				xhr = false; 
			}
 
		return xhr;		}
 
		function test(){
 
			var xhr=getXhr();
 
			xhr.onreadystatechange=function(){
 
				if(xhr.readyState==4 && xhr.status==200){
                                  alert("ok");				
                                 else{
					alert("erreur");}
				}
 
		}
</script>		
</head>
 
<body>
<INPUT type="button" name="test" value="test" onclick='test()' />
...
</body></html>

**Bovino** · 22/02/2010, 15h47

Tu pourrais commencer par lire les tutos : http://ajax.developpez.com/cours/
et en particulier les parties concernant les méthodes open() et send()

**Marc22** · 22/02/2010, 16h03

C'est la première chose que j'ai commencé à faire. Je me fais même des notes perso à coté. Après j'ai fait des copier collé des mêmes codes, et chez moi ça fait rien...

Le open je l'ai peut être oublié là dans mon code.

Mais à quoi ça sert? C'est pas fait pour ouvrir un autre fichier le open? Ils demandent en arguments la méthode, l'url, et ce que je sais c'est que quand je mets à false, c'est fini, rien ne marche mais absolument rien.

Et le send pour le get qu'on envoie avec null comme valeur. Enfin bref, je capte rien.

J'arrive pas à comprendre pourquoi, quand et comment il faut faire telle action.

Le send, le open, pourquoi on fait xhr.onreadystatechange=function(){blablabla}

**Marc22** · 22/02/2010, 16h59

Faudrait m'expliquer pourquoi ce code marche

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
<!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" xml:lang="en" dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script language="JavaScript">
	function submitForm()
	{ 
		var req = null; 
 
	//	document.ajax.dyn.value="Started...";
		if(window.XMLHttpRequest)
			req = new XMLHttpRequest(); 
		else if (window.ActiveXObject)
			req  = new ActiveXObject(Microsoft.XMLHTTP); 
 
		req.open("GET", "data.xml", true); 
		req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
		req.send(null); 
 
		req.onreadystatechange = function()
		{ 
//			document.ajax.dyn.value="Wait server...";
			if(req.readyState == 4)
			{
				if(req.status == 200)
				{
					document.ajax.dyn.value="Received:" + req.responseText;	
				}	
				else	
				{
					document.ajax.dyn.value="Error: returned status code " + req.status + " " + req.statusText;
				}	
			} 
		}; 
	} 
	</script>
	</head>
 
	<body>
		<FORM name="ajax" method="POST" action="">
 
  <p>
    <INPUT type="BUTTON" value="Submit"  ONCLICK="submitForm()">
  </p>
  <p>
    <input type="text" name="dyn" size="32" value="">
  </p>
</FORM>
	</body>
</html>

Et chez moi j'ai tout changé quasiment en fonction du code précédent et sur firefox, rien, sur ie, j'ai 4 fois l'alert "pas ok" et une fois l'alert ok à la fin...

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
58
59
60
61
62
63
64
65
66
<!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" xml:lang="en" dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script language="JavaScript">
 
		function test(){
 
		var xhr = null; 
 
		if(window.XMLHttpRequest)
			xhr = new XMLHttpRequest(); 
		else if (window.ActiveXObject)
			xhr  = new ActiveXObject(Microsoft.XMLHTTP); 
 
			xhr.open("GET","test.txt",true);
			req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
			xhr.send(null);
 
			xhr.onreadystatechange=function(){
 
				if(xhr.readyState == 4){
 
					if(xhr.status == 200){
 
						alert("ok");
						//document.ajax.dyn.value
					}
 
				}
				else{
 
					alert("pas ok");
				}
 
			};
		}
 
</script>		
 
 
</head>
 
 
<body>
 
<form name="ajax" method="POST" action="">
 
<input type="button" name="test" value="test" onclick="test()" />
 
</form>
		<?php 
                
                /*
                                header('Content-type:text/xml');
                                
                                echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';
                                
                                echo '<response>';
                                
                */              
                ?>
 
</body>
 
</html>

**Marc22** · 22/02/2010, 17h02

Et des fois ie me dit aussi :

Message*: Cet objet ne gère pas cette propriété ou cette méthode

en me mettant pour référence la méthode test() du input

**vincent_aubert** · 22/02/2010, 21h55

Salut.
Tout d'abord, le nom de ta fonction (test) ne semble pas être pris en charge par firefox, il doit la réserver pour autre chose.

Ensuite, à la ligne 17, tu fait un appel à la variable req, qui n'existe pas, tu l'as remplacé par xhr.

Quand tu regarde dans la doc ( http://www.w3.org/TR/2006/WD-XMLHttpRequest-20060405/ ) la méthode "readyState" n'a que 4 état:

0 Uninitialized
The initial value.
1 Open
The open() method has been successfully called.
2 Sent
The UA successfully completed the request, but no data has yet been received.
3 Receiving
Immediately before receiving the message body (if any). All HTTP headers have been received.
What about HEAD requests?
4 Loaded
The data transfer has been completed.

Les 3 premières étapes son validées même si le document cherché n'existe pas. Fait plutôt ta vérification sur "xhr.status"

Voila le code modifié :

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
58
59
60
61
62
63
64
65
66
<!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" xml:lang="en" dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script type="text/javascript">
 
		function test123(){
 
		var xhr = null; 
 
		if(window.XMLHttpRequest)
			xhr = new XMLHttpRequest(); 
		else if (window.ActiveXObject)
			xhr  = new ActiveXObject(Microsoft.XMLHTTP); 
 
			xhr.open("GET","test.txt",true);
			xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
			xhr.send(null);
 
			xhr.onreadystatechange=function(){
 
				if(xhr.readyState == 4){
 
					if(xhr.status == 200){
 
						alert("Contenu Ajax ->" + xhr.responseText );
						//document.ajax.dyn.value
					}
					if(xhr.status == 404){
 
						alert("Page introuvable");
						//document.ajax.dyn.value
					}
 
				}
			};
		}
 
</script>		
 
 
</head>
 
 
<body>
 
<form name="ajax" method="POST" action="">
 
<input type="button" name="test" value="test" onclick="test123()" />
 
</form>
	<?php 
                
                /*
                                header('Content-type:text/xml');
                                
                                echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';
                                
                                echo '<response>';
                                
                */              
                ?>
 
</body>
 
</html>

Voila, j'espère t'avoir mis sur la bonne voie.

**Marc22** · 22/02/2010, 22h53

Merci beaucoup Vincent, j'avais remarqué qu'au fil de parties copiées collées, j'avais gardé des variables d'autres exemples j'ai rectifié ça.

Je crois que je me suis obstiné à faire quelque chose de pas possible. Récupérer une variable javascript pour l'utiliser sur une page php. Et au fil de ce que j'ai trouvé sur le net, j'ai vu qu'il fallait fouiller du coté de l'ajax.

Et ça m'a vite énervé de pas comprendre, mais j'aimerais savoir manipuler ce fameux objet XMLHttpRequest.

En tout cas merci, je reprendrai demain.

**simotaqi** · 23/02/2010, 16h19

Bonjour Marc et bienvenue sur le forum,

Puisque tu ne comprends pas beaucoup de choses en ajax, je vais t'expliquer :
Ajax est une technologie pour le chargement des données (images, textes, xml , document ...etc) sans actualiser la page. Je vais te donner un simple exemple pour commencer.
Premierment tu vois ce code html:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<html>
<head>
<script language="javascript" type="text/javascript" src="getXHR.js"></script>
<script language="javascript" type="text/javascript" src="ajax.js"></script>
</head>
<body>
<input type="text" id="username"><br>
<input type="text" id="password"><br>
<input type="button" id="ok">
<div id="resultat"></div>
</body>
</html>

tu vois que j'ai pose dans la page html deux textbox pour entrer le username et le password, un bouton et un div pour afficher le resultat
les script importé dans le head sont des code de javascript Ajax

passant d'abord au code javascript pour la creation de l'objet xmlhttprequest
le fichier getXHR.js

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
 
function getXHR (){
var req=null;
try{
req=new XMLHttpRequest();
}
catch(err){
       try{
       req=new ActiveXObject("Microsoft.XMLHTTP");
       }
       catch(err2){
               try{
 
                 req=new ActiveXObject("Msxml2.XMLHTTP");
               }catch(err3){
                 alert("xmlhttprequest n'est pas disponible dans votre nav");
 
               } 
       }
 
}
return req;
}

ici je fais des testes avec try et catch , si le req est crée en tant que xmlhttprequest , c'est a dire qu'il s'agit d'un nav mozilla ... ou bien ie dans le cas de ActiveXObject.
le xmlHttprequest est un objet qui sert a envoyer une requete au code php ,qui va gérer la requete et va l'envoyer a l'utilisateur par xmlhttprequest... Maintenant c'est compris?

ensuite , vient le code suivant : (Ajax.js)

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
 
function getResponse(){
req=new getXHR();
req.onreadystatechange=function(){
if (req.readyState==4){
if (req.status==200){
document.getElementById("resultat").innerHTML=req.responseText;
}
}
else{
document.getElementById("resultat").innerHTML="Loading....";
}
}
var url="message.php?myuser="+document.getElementById("username").value+"&mypass="+document.getElementById("password").value;
req.open("GET",url,true);
req.send(null);
}

puis le code php qui renvoie la reponse :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<?php
$username=$_GET['myuser'];
$password=$_GET['mypass'];
if ($username=='simo' & $password=='123'){
echo ("bonjour simo!");
}
else{
echo ("t'es anonyme, pas de bonjour!");
}
?>

**simotaqi** · 23/02/2010, 16h58

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<html>
<head>
<script language="javascript" type="text/javascript" src="getXHR.js"></script>
<script language="javascript" type="text/javascript" src="ajax.js"></script>
</head>
<body>
<input type="text" id="username"><br>
<input type="text" id="password"><br>
<input type="button" id="ok" onclick="getResponse();">
<div id="resultat"></div>
</body>
</html>

Si on click sur le bouton dont l'id =ok , il appelle la fonction getResponse() qui est dans le fichier ajax.js
dans ajax.js nous avons: req=new getXHR(); (getXHR() est fonction pour créer le xmlhttprequest) ensuite , ayant créeé le xmlhttprequest nous avons ,
req.onreadystatechange=function(){blablabla}
ca signifie que req entend l'état de reponse , s'il y a une nouvelle réponse la fonction execute le blablabla,

puis vient le if (req.readyState==4)
ca veut dire si etat de la reponse==4 (reception de la reponse complete)
on a 5 etat pour readystate
0=uninitialized
1=loading (on n'a pas encore executer req.send
2=loaded (on a executé req.send/on a envoyer la requete)
3=Interactive( on n'a recu une parti de la reponse)
4=Completed (reponse complete)

alors si la réponse est completement recue, en fait un autre test
if (req.status==200)
le 200 signifie ok , il y a d'autre valeur pour status comme 404 qui signifie non disponible ,il y a des valeur qui signifie que la page n'est pas autorisée.

alors apres ces conditions: document.getElementById('resultat').innerHTML=req.responseText;

en aplique le req.responseText (text retourné par la requete ajax) a l'innerHTML du composant dont l'id=resultat,(innerHTML de notre div c'est la place ou se trouve le smiley <div id="resultat">

</div>! si tu n'a jamais travaillé avec)
sinon (si req.readyState!=4 et req.status!=200) on affiche loding... dans le div
ce loading... peut etre une image de load ou video ou autre chose.............!!!

ensuite viens le open
req.open(); s'execute avant onreadystatechange
notre open sert a envoyer une requete par la method get, nooous demandons la page message.php et on lui envoi une variable username et password(valeur textbox username et password)
myuser et mypass sont des variable php
alors dans le code php on a $_GET['myuser'] et $_GET['mypass'] qui retournent les donnees envoyé par la methode get
ensuite on a true (que je ne fixe pas bien dans ma cervelle........

)
puis send qui n'envoie rien au cas de la method get,
au cas de la methode post notre url devient url="message.php",
et le send devient req.send("myuser="+document.getElementById('username')value+"&password="+document.getElementById("password").value);

ensuite , le code php verifie si que notre username et password retournés par get sont egale a "simo" et "123" et affiche le resultat sont actualisé la page

remarque: dans ajax tout ce qui est dans une methode echo de php , va etre traite comme text de reponse (req.responseText)
on peut ecrire par exemple : echo '<font color="#EE0000">vous etes anonyme</font>', pour afficher du message en rouge.

bon j'espere que tu as maintenant une bonne idee sur ajax , et bonne programmation.

si j'ai dit quelque chose que tu sais deja , excuse moi , car j'es supposé que tu est debutant.

**Marc22** · 23/02/2010, 17h38

Franchement... un grand merci pour ta patience c'est super gentil.

C'est vraiment bien expliqué. J'avais un exemple de cours similaire, avec un array de prénoms, et quand on tapait un prénom non stocké dans le array, ça mettait un message similaire.

Mais là au moins c'est détaillé pas à pas, la structure me faisait un peu peur avec le onreadystatechange=function() {...} je trouvais ça assez atypique.

je suis débutant en ajax, disons que j'avais déjà débuté il y a quelques mois où j'exécutais des bouts de code sans trop les comprendre, je récupérais à droite à gauche des trucs qui marchaient et je modifiais quelque peu pour les adapter.

en tout cas j'ai essayé ton code en local, et tout est limpide, ça marche très bien, le code n'est pas surchargé et est compréhensible. surtout avec tes explications !

C'est vraiment puissant ajax, c'est pour ça que je voulais comprendre un minimum.

Je te remercie encore, passe une bonne soirée

**simotaqi** · 23/02/2010, 18h21

De rien mon ami...
N'oubli pas que Ajax est trés simple en principe...
Au revoir

[AJAX] je comprends rien en ajax.. aucune alert ne fonctionne..

AJAX

Discussions similaires

Partager

Partager