[AJAX] Appel Webservice Javascript

Version imprimable

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:

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:

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

Bonjour,

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

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

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:

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.

23/02/2011, 14h06
Bovino

Code:

if (xmlHttpRequest.state == 200)

:nono:

Code:

if (xmlHttpRequest.status == 200)

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:

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:

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

23/02/2011, 14h43
smori

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.
23/02/2011, 14h50
Bovino

Citation:

Je dois vraiment passer à coté de quelque chose.

Bah oui... :calim2:

Citation:

Envoyé par Bovino

Code:

if (xmlHttpRequest.state == 200)

:nono:

Code:

if (xmlHttpRequest.status == 200)
23/02/2011, 15h09
smori

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

ReBonjour,

Problème résolu.

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

Voila en fait le bout de code passe pas sous chrome 9, firefox 3.6.
Mais il passe sous IE6.

Cordialement,
smori

23/02/2011, 15h22
Bovino

Citation:

Envoyé par smori

Je passe à la lecture d'un webservice en ligne.

Ca, ça risque pas d'être possible : voir Same Origin Policy. :aie:
24/02/2011, 10h48
smori

Ok merci beaucoup je connaissais pas ce Same Origin Policy.

Cordialement,
smori