[AJAX] Comment recuperer des variable

**Emcy** · 13/11/2006, 13h15

bonjour,

Avec AJAX, je sais recuperer le contenu d'un fichier et l'afficher dans une page.

Maintenant, j'aimerais afficher des variables qui sont dans un fichier
1- comment faut-il structurer le fichier qui contient les variables ? met-on juste les variables les unes à la suite des autres ou faut-il mettre une entete ? faut-il que le fichier soit en XML ?
2- comment recuperer les variables pour les afficher dans mon fichier Html ?

**denisC** · 13/11/2006, 14h50

Envoyé par Emcy

bonjour,

Avec AJAX, je sais recuperer le contenu d'un fichier et l'afficher dans une page.

Maintenant, j'aimerais afficher des variables qui sont dans un fichier
1- comment faut-il structurer le fichier qui contient les variables ? met-on juste les variables les unes à la suite des autres ou faut-il mettre une entete ? faut-il que le fichier soit en XML ?
2- comment recuperer les variables pour les afficher dans mon fichier Html ?

Les formats les plus utilisés sont:

XML, il faut utiliser le responseXML au lieu du responseText
JSON, cf : http://javascript.developpez.com/faq...n.introduction
Tout format texte que tu juges pertinent, en parsant de façon adéquate.

**Emcy** · 13/11/2006, 16h52

d'accord.

dans quel cas faut-il utiliser JSON ou XML ?

**denisC** · 13/11/2006, 17h17

Envoyé par Emcy

dans quel cas faut-il utiliser JSON ou XML ?

Bof.

Je dirais XML si tu comptes en faire des autres choses compliquées (webservices vers des clients lourds, ....).
JSON si tout ce que tu veux faire c'est du Ajax dans cette page.

Après, les gouts et les couleurs.... Prends celui que tu comprends le mieux

**Emcy** · 13/11/2006, 17h49

d'accord,

je me suis penché sur JSON (c'est plus légé), mais ça ne marche pas. Pourquoi (j'ai regardé sur le site officiel mais c'est pas très clair) ?

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
14
15
16
17
18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="RecupereVariables.js"></script>
	</head>
 
	<body>
 
		<span style="cursor: pointer; text-decoration: underline;" onclick="makeRequest('./data.json')">
                Lancer la requete
        </span>
 
		<p>Ma Variable 1 : <span id="mot1">Valeur 1</span></p>
		<p>Ma Variable 2 : <span id="mot2">Valeur 2</span></p>
 
    </body>
</html>

le fichier data.json :

Code :

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

1
2
3
4
var JSONvariables = { 
	"variable1_json": "toto", 
	"variable2_json": "tata" 
}

le fichier RecupereVariables.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
24
25
26
27
28
29
30
var http_request = false;
 
function makeRequest(url) {
 
	http_request = false;
 
	http_request = new XMLHttpRequest();
 
	http_request.open("GET", url, true); 
	http_request.onreadystatechange = request_execute
	http_request.send(null); 
 
	/* http_request.onreadystatechange = request_execute;
	http_request.open('GET', url, true);
	http_request.send(null); */
}
 
function request_execute() {
 
	if (http_request.readyState == 4) {
 
		if (http_request.status == 200) {
			var Variables = document.getElementById('JSONvariables');
			document.getElementById('mot1').innerHTML = variable1_json;
 
		} else {
			alert('Il y a un problème avec la requète XMLHTTP');
		}
	}
}

**denisC** · 13/11/2006, 19h55

le fichier RecupereVariables.js :

Code js :

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

1
2
3
4
5
6
7
 
		if (http_request.status == 200) {
			eval(http_request.responseText);
			document.getElementById('mot1').innerHTML = JSONvariables.variable1_json;
 
		} else {
			...

En fait normalement, tu ne renvoies pas le nom de la variable JSON et tu fais

Code js :

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

1
2
 
var maVariable = eval(http_request.responseText);

Mais bon, avec le nom, ça marche aussi

**Emcy** · 14/11/2006, 08h45

j'ai pas bien compris comment ça fonctionne avec la deuxime methode (la premiere marche), voici mon code modifié (et qui marche toujours pas

)

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
var http_request = false;
 
function makeRequest(url) {
 
	http_request = false;
 
	if (window.XMLHttpRequest) { // Mozilla, Safari,...
		http_request = new XMLHttpRequest();
		if (http_request.overrideMimeType){
			http_request.overrideMimeType('text/xml');
		}
	} else if (window.ActiveXObject) { // IE
		try {
			http_request = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
			http_request = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {}
		}
	} 
 
	if (!http_request) {
		alert('Impossible de créer un objet XMLHTTP');
		return false;
	} 
 
	http_request.onreadystatechange = request_execute;
	http_request.open('GET', url, true);
	http_request.send(null);
}
 
function request_execute() {
 
	if (http_request.readyState == 4) {
 
		if (http_request.status == 200) {
			var maVariable = eval(http_request.responseText);
 
			document.getElementById('mot1').innerHTML = maVariable.variable1_json;
 
			document.getElementById('mot2').innerHTML = maVariable.variable2_json;			
		} else {
			alert('Il y a un problème avec la requète XMLHTTP');
		}
	}
}

j'ai vérifié, la condition if (http_request.status == 200) est remplie

**denisC** · 14/11/2006, 22h27

http_request.overrideMimeType('text/xml');

Pas bon pour faire du json. Plutot application/json (en théorie), voire text/plain...

**Emcy** · 15/11/2006, 08h59

Envoyé par denisC

Pas bon pour faire du json. Plutot application/json (en théorie), voire text/plain...

j'ai pas bien compris ta reponse : il faut remplacer cette ligne par :
http_request.overrideMimeType('text/plain'); ?

=> ça marche toujours pas....

**Antoine Galmiche** · 15/11/2006, 14h50

Si tu n'as pas beaucoup de variables à rapatrier, tu peux peut-être utiliser du texte, tout simplement.
Tu sépares tes variables par un caractère exotique (qui ne se retrouvera pas dans le flux) et tu éclates responseText en tableau avec .split :
montableau = resultat.responseText.split('%');
mavar1 = montableau [0];
mavar2 = montableau [1];
etc.
Eventuellement, tu peux décomposer le tableau en couples intitulé / valeur.

**Emcy** · 15/11/2006, 15h29

merci pour ta reponse mais je prefere faire du JSON : c'est plus evolutif

**frodum** · 16/11/2006, 10h54

Bonjour,

Alors tout d'abord, a mon avis tu exécutes cet exemple en local sur ta machine sans serveur Web, donc le test sur "http_request.status" renvoie 0 puisqu'il n'y a pas de réponse HTTP de la part d'un quelconque serveur.
Tu peux donc retirer ce test (si tu ne souhaites pas mettre ton exemple sur un serveur web évidemment).

Comme DenisC, je pense que la ligne "http_request.overrideMimeType('text/xml'); " ne devrait pas être présente ;-)

Enfin, pour utiliser le format JSON, il faut ajouter des parenthèses ici :

Code :

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

var maVariable = eval('('+http_request.responseText+')');

Je ne sais pas exactement pourquoi, mais sinon Javascript a du mal à l'interpréter.
Et ton fichier JSON doit ressembler à çà :

Code :

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

1
2
3
4
{ 
	"variable1_json": "toto", 
	"variable2_json": "tata" 
}

Voilà, j'espère ne pas avoir dit trop de bétises (je débute aussi ;-)).
J'espère que ça t'aidera.

**Emcy** · 16/11/2006, 12h57

ça marche pas

j'ai essayé de mettre http_request.overrideMimeType('text/plain'); et de rien mettre du tout...

**frodum** · 16/11/2006, 13h47

Toujours la même erreur?
Es-tu en local? sur un serveur web?
As-tu supprimé la ligne du test du http_request_status?
Peux-tu reposter ton code, qu'on sache ou tu en es ;-)

**Emcy** · 16/11/2006, 17h49

Envoyé par frodum

Toujours la même erreur?
Es-tu en local? sur un serveur web?
As-tu supprimé la ligne du test du http_request_status?
Peux-tu reposter ton code, qu'on sache ou tu en es ;-)

=> j'ai testé sur un seveur
=> j'ai essayé un peu tout mais sans trouve

voici tous les fichiers :
http://cjoint.com/?lqrVZsvbxE

**frodum** · 17/11/2006, 09h18

Bon bah ecoute en deux minutes avec ce que je t'ai dit, j'ai fait fonctionné ton truc.

Mes remarques :
1/ Ton fichier json, s'appelle data.cgi, pourquoi pas mais bon je pense que data.json c'est quand même plus approprié.
2/ Moi j'ai testé en local, j'ai donc supprimé la ligne ou tu testes si status==200 et ça fonctionne.
3/ concernant le eval, j'ai d'abord fait comme ça :
Dans le .js :

Code :

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

var maVariable = eval('('+http_request.responseText+')');

Dans le data.cgi :

Code :

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

1
2
3
4
{ 
	"SerialNumber": "%30",
	....
}

Puis j'ai testé comme toi (i.e. sans les parenthèses ds eval et avec var = JsonVariables ds le cgi).
Dans les deux cas ça fonctionne.
Je ne connaissais pas JSON avant que tu en parles hier donc je suppose maintenant que les deux sont valables.

Donc si tu as testé en local en enlevant le test sur status, je ne vois pas trop où est l'erreur sachant que ça marche chez moi.
Désolé.

**Emcy** · 17/11/2006, 10h20

Envoyé par frodum

Bon bah ecoute en deux minutes avec ce que je t'ai dit, j'ai fait fonctionné ton truc.

Mes remarques :
1/ Ton fichier json, s'appelle data.cgi, pourquoi pas mais bon je pense que data.json c'est quand même plus approprié.
2/ Moi j'ai testé en local, j'ai donc supprimé la ligne ou tu testes si status==200 et ça fonctionne.
3/ concernant le eval, j'ai d'abord fait comme ça :
Dans le .js :

Code :

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

var maVariable = eval('('+http_request.responseText+')');

Dans le data.cgi :

Code :

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

1
2
3
4
{ 
	"SerialNumber": "%30",
	....
}

Puis j'ai testé comme toi (i.e. sans les parenthèses ds eval et avec var = JsonVariables ds le cgi).
Dans les deux cas ça fonctionne.
Je ne connaissais pas JSON avant que tu en parles hier donc je suppose maintenant que les deux sont valables.

Donc si tu as testé en local en enlevant le test sur status, je ne vois pas trop où est l'erreur sachant que ça marche chez moi.
Désolé.

alors la je ne comprend pas, j'ai testé en local avec easyPHP et rien ne marche (avec ta methode ou la mienne) : c'est encore pire que lorsque je le mets sur mon serveur
=> ça me semble vraimment bizarre que tu enleves la ligne de test : comment veux-tu qu'il detecte s'il a bien reçu le fichier, sinon ?

actuellement avec ma methode :
1- ça marche bien sous fireFox
2- ça se lance une fois sous IE et après ça ne se mets plus à jour

As tu bien compris ce que ça fait :
ma page va cherchée dans le fichier .cgi les variables et affiche leur valeurs => donc si pendant l'execution du script tu changes une valeur dans le fichier .cgi, tu devrais voir le changement de la variable dans la page html

**denisC** · 17/11/2006, 10h29

Essaye de rajouter des messages d'alert dans les différentes méthodes, afin de vérifier que tout se déroule correctement (vérifie en particulier la valeur de Connexion_OK).

Sinon, je te conseille de faire tous tes tests sur un serveur web (même local), plutot que directement. Ajax est fait pour fonctionner depuis un serveur, et uniquement de cette façon.

**frodum** · 17/11/2006, 10h45

lol je comprends bien ce que ça fait vu que je l'ai vu marcher ;-)
Seulement effectivement j'ai testé directement (sans serveur), je vais voir ce que ça donne sur un serveur.
Sinon je suis bien d'accord que le test (status==200) est important et que AJAX c pour de la communication client/serveur.

**Emcy** · 17/11/2006, 10h53

Envoyé par denisC

Essaye de rajouter des messages d'alert dans les différentes méthodes, afin de vérifier que tout se déroule correctement (vérifie en particulier la valeur de Connexion_OK).

Sinon, je te conseille de faire tous tes tests sur un serveur web (même local), plutot que directement. Ajax est fait pour fonctionner depuis un serveur, et uniquement de cette façon.

=> je l'ai fait et j'ai identifié le probleme : une fois que la requete à été executé 1 fois sous IE

Code :

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

1
2
3
 
if (http_request.readyState == 4) {				
		if (http_request.status == 200)

est vrai a chaque fois que je lance la requete (makeRequest) : même si le cable reseau est deconnecté => c'est fort...
mes variables JSON une fois chargées une fois ont toujours la même valeur (que le cable reseau soit connecté ou non) => ça aussi c'est fort

=> on dirait qu'une fois que mon objet AJAX est créé et qu'il a reçu une requete, il n'est plus mis à jour...
meme http_request = new ActiveXObject(..) ne réinitialise pas mon objet...

[AJAX] Comment recuperer des variable

JavaScript

Discussions similaires

Partager

Partager