[AJAX] Appel Webservice Javascript

**smori** · 22/02/2011, 11h25

Bonjour,

Je découvre javascript et les webservices. J'essaye donc un exercice :
Appeller un webservice avec javascript.

J'ai en premier commencé par trouver un webservice :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
POST /LondonGoldFix.asmx HTTP/1.1
Host: www.webservicex.net
Content-Type: application/soap+xml; charset=utf-8
Content-Length: length
 
<?xml version="1.0" encoding="utf-8"?>
<soap12:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap12="http://www.w3.org/2003/05/soap-envelope">
  <soap12:Body>
    <GetLondonGoldAndSilverFix xmlns="http://www.webservicex.net" />
  </soap12:Body>
</soap12:Envelope>

Je me suis donc inspiré d'un tuto et j'ai pondu :

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
 
<html>
	<head>
		<title>Test Ajax Webservice</title>
		<script type="text/javascript">			
			// Permet de créer un XmlHttpRequest
			function createXmlHttpRequest() {
				var xmlHttpRequest;
				if (window.XMLHttpRequest) {
					xmlHttpRequest = new XMLHttpRequest();
				}
				else if (window.ActiveXObject) {
					xmlHttpRequest = new ActiveXObject('Microsoft.XMLHTTP');
				}
				else {
					throw new Error("Could not create XMLHttpRequest object.");
				}
				return xmlHttpRequest;
			}
 
			// Appel du webservice
			function callWebService() {
				var xmlHttpRequest = createXmlHttpRequest();
				xmlHttpRequest.open("POST", "http://www.webservicex.net/LondonGoldFix.asmx", true);
				xmlHttpRequest.onreadystatechange = function() {
					if (xmlHttpRequest.readyState === 4) {
						alert(xmlHttpRequest.responseXML.text);
					}
				}
 
				xmlHttpRequest.setRequestHeader("content-type", "application/soap+xml");
				xmlHttpRequest.send("<GetLondonGoldAndSilverFix xmlns=\"http://www.webservicex.net\" />");
			}
 
			// Lance le scénario de test
			function run() {
				callWebService();
			}
		</script>
	</head>
	<body>
		<div>
			<input type="button" value="Cliquez ici" onclick="javascript:run()" />
		</div>
	</body>
</html>

Je voudrais juste afficher le résultat brut de la requête mais rien ne se passe quand j'appuie sur le bouton.

Quelqu'un pourrait m'aiguiller svp je comprend pas trop le bouzin.

Cordialement,
Smori

**smori** · 23/02/2011, 11h24

Bonjour,

J'ai essayé d'attaquer un bout de code trouvé sur un bouquin à ce sujet :

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
 
<html>
	<head>
		<title>Test Ajax Webservice</title>
		<script type="text/javascript">			
			// Permet de créer un XmlHttpRequest
			function createXmlHttpRequest() {
				var xmlHttpRequest;
				if (window.XMLHttpRequest) {
					xmlHttpRequest = new XMLHttpRequest();
				}
				else if (window.ActiveXObject) {
					xmlHttpRequest = new ActiveXObject('Microsoft.XMLHTTP');
				}
				else {
					throw new Error("Could not create XMLHttpRequest object.");
				}
				return xmlHttpRequest;
			}
 
			// Appel du webservice
			function callWebService() {
				var xmlHttpRequest = createXmlHttpRequest();
				xmlHttpRequest.open("GET", "test.xml", true);
				xmlHttpRequest.onreadystatechange = function() {
					/*
					 *	READY_STATE_UNINITIALIZED=0; 
					 *	READY_STATE_LOADING=1;
					 *	READY_STATE_LOADED=2; 
					 *	READY_STATE_INTERACTIVE=3;
					 *	READY_STATE_COMPLETE=4;
					 */					
					if (xmlHttpRequest.readyState == 4) {
						if (xmlHttpRequest.state == 200) {
							document.getElementById('out').innerHTML = xmlHttpRequest.responseText;
						}
						else {
							document.getElementById('out').innerHTML = "Erreur état = " + xmlHttpRequest.state;
						}
					}
				}
 
				xmlHttpRequest.send(null);
			}
 
			// Lance le scénario de test
			function run() {
				callWebService();
			}
		</script>
	</head>
	<body>
		<div>
			<input type="button" value="Cliquez ici" href="#" onclick="javascript:run()" />
			<p id="out" />
		</div>
	</body>
</html>

Le problème c'est que je me retrouve avec out =

Code :

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

Erreur état = undefined

Je ne comprend pas trop comment ca marche.

Le fichier test.xml est dans le même répertoire que le fichier HTML.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<?xml version="1.0" encoding="utf-8"?>
<LondonMarketData xmlns="http://www.webservicex.net">
  <Gold_AM_USD>0</Gold_AM_USD>
  <Gold_AM_STG>0</Gold_AM_STG>
  <Gold_AM_EUR>0</Gold_AM_EUR>
  <Gold_PM_USD>0</Gold_PM_USD>
  <Gold_PM_STG>0</Gold_PM_STG>
  <Gold_PM_EUR>0</Gold_PM_EUR>
  <Silver_CENTS>0</Silver_CENTS>
  <Silver_PENCE>0</Silver_PENCE>
  <Silver_EUR>0</Silver_EUR>
  <Status>Niark</Status>
</LondonMarketData>

Si quelqu'un peut m'aider merci d'avance.

**Bovino** · 23/02/2011, 14h06

Code :

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

if (xmlHttpRequest.state == 200)

Code :

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

if (xmlHttpRequest.status == 200)

**smori** · 23/02/2011, 14h31

Hop merci j'avance un peu.

Toujours complètement perdu j'essaye d'avoir plus de renseignement mais je n'y touve pas de logique.

J'ai complété mon code pour savoir ce qui se passait à chaque étape et j'ai l'impression qu'il saute des étapes :

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
<html>
	<head>
		<title>Test Ajax Webservice</title>
		<script type="text/javascript">			
			// Permet de créer un XmlHttpRequest
			function createXmlHttpRequest() {
				var xmlHttpRequest;
				if (window.XMLHttpRequest) {
					xmlHttpRequest = new XMLHttpRequest();
				}
				else if (window.ActiveXObject) {
					xmlHttpRequest = new ActiveXObject('Microsoft.XMLHTTP');
				}
				else {
					throw new Error("Could not create XMLHttpRequest object.");
				}
				return xmlHttpRequest;
			}
 
			// Appel du webservice
			function callWebService() {
				var xmlHttpRequest = createXmlHttpRequest();
				xmlHttpRequest.open("POST", "http://www.webservicex.net/LondonGoldFix.asmx/GetLondonGoldAndSilverFix", true);
				xmlHttpRequest.onreadystatechange = function() {
					/*
					 *	READY_STATE_UNINITIALIZED=0; 
					 *	READY_STATE_OPEN=1;
					 *	READY_STATE_SENT=2; 
					 *	READY_STATE_RECEIVING=3;
					 *	READY_STATE_LOADED=4;
					 */		
 
					if (xmlHttpRequest.readyState == 0) {
						document.getElementById('out').innerHTML += "READY_STATE_UNINITIALIZED" + "<br />";
					}
 
					else if (xmlHttpRequest.readyState == 1) {
						document.getElementById('out').innerHTML += "READY_STATE_OPEN" + "<br />";
					}
 
					else if (xmlHttpRequest.readyState == 2) {
						document.getElementById('out').innerHTML += "READY_STATE_SENT" + "<br />";
 
					}
 
					else if (xmlHttpRequest.readyState == 3) {
						document.getElementById('out').innerHTML += "READY_STATE_RECEIVING" + "<br />";
 
					}
 
					else if (xmlHttpRequest.readyState == 4) {				
						if (xmlHttpRequest.status== 200) {
							document.getElementById('out').innerHTML += xmlHttpRequest.responseText;
						}
						else {
							document.getElementById('out').innerHTML += "Erreur état = " + xmlHttpRequest.status+ "<br />";
						}
						document.getElementById('out').innerHTML += xmlHttpRequest.getAllResponseHeaders() + "<br />";
					}
					else {
						document.getElementById('out').innerHTML += xmlHttpRequest.readyState + "<br />";
					}
 
					document.getElementById('out').innerHTML += xmlHttpRequest.responseText;
				}
 
				xmlHttpRequest.send(null);
			}
 
			// Lance le scénario de test
			function run() {
				callWebService();
			}
		</script>
	</head>
	<body>
		<div>
			<input type="button" value="Cliquez ici" href="#" onclick="javascript:run()" />
			<p id="out" />
		</div>
	</body>
</html>

L'affichage :

Code :

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

1
2
3
4
5
 
READY_STATE_OPEN
READY_STATE_SENT
Erreur état = 0
null

Je vais chercher c'est quoi ce code 0 et surtout pourquoi je ne passe pas par l'étape READY_STATE_RECEIVING

**smori** · 23/02/2011, 14h43

D'après mes recherches : http://fr.wikipedia.org/wiki/Liste_des_codes_HTTP. Le Code de retour 0 n'existe pas ... impasse.

Je dois vraiment passer à coté de quelque chose.

Si quelqu'un sait quoi merci d'avance.

**Bovino** · 23/02/2011, 14h50

Je dois vraiment passer à coté de quelque chose.

Bah oui...

Envoyé par Bovino

Code :

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

if (xmlHttpRequest.state == 200)

Code :

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

if (xmlHttpRequest.status == 200)

**smori** · 23/02/2011, 15h09

Merci Bovino j'avait déjà pris ta remarque en considération

Pour ce qui est des autres problèmes :
Quand c'est bon le status peut être à 0 (exemple cas ou on lis le fichier xml, pas de serveur web donc pas de code retour ce qui implique le zero).

J'ai donc réussi à lire le fichier xml.
Je passe à la lecture d'un webservice en ligne.

Cordialement,
smori

**smori** · 23/02/2011, 15h21

ReBonjour,

Problème résolu.

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
<html>
	<head>
		<title>Test Ajax Webservice</title>
		<script type="text/javascript">			
			// Permet de créer un XmlHttpRequest
			function createXmlHttpRequest() {
				var xmlHttpRequest;
				if (window.XMLHttpRequest) {
					xmlHttpRequest = new XMLHttpRequest();
				}
				else if (window.ActiveXObject) {
					xmlHttpRequest = new ActiveXObject('Microsoft.XMLHTTP');
				}
				else {
					throw new Error("Could not create XMLHttpRequest object.");
				}
				return xmlHttpRequest;
			}
 
			// Appel du webservice
			function callWebService() {
				var xmlHttpRequest = createXmlHttpRequest();
				xmlHttpRequest.open("POST", "http://www.webservicex.net/LondonGoldFix.asmx/GetLondonGoldAndSilverFix", true);
				xmlHttpRequest.onreadystatechange = function() {
					/*
					 *	READY_STATE_UNINITIALIZED=0; 
					 *	READY_STATE_OPEN=1;
					 *	READY_STATE_SENT=2; 
					 *	READY_STATE_RECEIVING=3;
					 *	READY_STATE_LOADED=4;
					 */		
 
					if (xmlHttpRequest.readyState == 0) {
						document.getElementById('out').innerHTML += "READY_STATE_UNINITIALIZED" + "<br />";
					}
 
					else if (xmlHttpRequest.readyState == 1) {
						document.getElementById('out').innerHTML += "READY_STATE_OPEN" + "<br />";
					}
 
					else if (xmlHttpRequest.readyState == 2) {
						document.getElementById('out').innerHTML += "READY_STATE_SENT" + "<br />";
 
					}
 
					else if (xmlHttpRequest.readyState == 3) {
						document.getElementById('out').innerHTML += "READY_STATE_RECEIVING" + "<br />";
 
					}
 
					else if (xmlHttpRequest.readyState == 4) {				
						if (xmlHttpRequest.status == 200 || xmlHttpRequest.status == 0) {
							document.getElementById('out').innerHTML += xmlHttpRequest.responseText + "<br />";
						}
						else {
							document.getElementById('out').innerHTML += "Erreur état = " + xmlHttpRequest.status + "<br />";
						}
					}
					else {
						document.getElementById('out').innerHTML += xmlHttpRequest.readyState + "<br />";
					}
				}
 
				xmlHttpRequest.send(null);
			}
 
			// Lance le scénario de test
			function run() {
				callWebService();
			}
		</script>
	</head>
	<body>
		<div>
			<input type="button" value="Cliquez ici" href="#" onclick="javascript:run()" />
			<p id="out" />
		</div>
	</body>
</html>