[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.

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

AJAX

Vue hybride

Discussions similaires

Partager

Partager