[AJAX] Connection base de donnée MySQL

Bonjour,
je suis en train de développer un Widget Yahoo.
Les widgets yahoo utilisent le XML pour la mise en forme et le javascript pour les events.
j'aimerais me connecter a la base de donnée MySQl de mon site web de vente en ligne pour y récupérer des des données (promotions, compte client) mais il semble qu'il n'existe pas de fonction pour se connecter a une base de donnée MySQL en javascript :koi:
comment faire dans ce cas la ?
merci a tous

En AJAX, pour utiliser le JavaScript. Sinon le PHP au chargement de la page

Passe par Ajax...

Appeler une page PHP ? pour lire mes données c'est tres bien, mais je ne vois pas trop comment récupérer mes données dans le code javascript.

recuperer les données comme ceci ?
http://gael-donat.developpez.com/web/intro-ajax/#LIII-A

Ben voilà tu as déjà tout trouvé :king:

Ca avance ...

traitement.php hébergé a la racine de mon site :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
echo "<text><name>Donnees</name>\n";
 
 
//on lance la requete
$query = "SELECT specials_id FROM specials";
$result = mysql_query($query) or die (mysql_error());
 
//On boucle sur le resultat
while ($row = mysql_fetch_array($result, MYSQL_NUM))
{
	echo "<data>" . $row[0] . "</data>\n";
}
echo "</text>\n";

Main.js (fichier appelé au chargement du widget) :

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
/* Refresh Preferences */
function updateBehavior()
		{
		myText.color = preferences.textColorPref.value;
		}
 
/* Donnees DB */
function ajax()
{
    var xhr=null;
 
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //on définit l'appel de la fonction au retour serveur
    xhr.onreadystatechange = function() { retour_ajax(xhr); };
 
    //on appelle le fichier reponse.php
    xhr.open("GET", "http://www.cadline.fr/traitement.php", true);
    xhr.send(null);
 
}
 
/* Retour Serveur */
function retour_ajax(xhr)
{
	var docXML= xhr.responseXML;
	var items = docXML.getElementsByTagName("data")
	//on fait juste une boucle sur chaque element "donnee" trouvé
	for (i=0;i<items.length;i++)
	{
		Donnees.data = (items.item(i).firstChild.data);
	}
}
 
 
updateBehavior();
ajax();

Fichier.kon (widget en lui meme) :

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<?xml version="1.0" encoding="UTF-8"?>
<widget>
	<debug>off</debug>
	<window>
	<bgColor>#CCCCCC</bgColor>
			<image name="baseTopLeft" src="images/Colorized/Top Left.png"/>
			<image name="baseTopMiddle" src="images/Colorized/Top Middle.png" hOffset="32"/>
			<image name="baseTopMiddle1" src="images/Colorized/Top Middle.png" hOffset="64"/>
			<image name="baseTopMiddle2" src="images/Colorized/Top Middle.png" hOffset="96"/>
			<image name="baseTopMiddle3" src="images/Colorized/Top Middle.png" hOffset="128"/>
			<image name="baseTopMiddle4" src="images/Colorized/Top Middle.png" hOffset="160"/>
			<image name="baseTopRight" src="images/Colorized/Top Right.png" hAlign="right"/>
			<image name="baseMiddleLeft" src="images/Colorized/Middle Left.png" vOffset="32"/>
			<image name="baseMiddle" src="images/Colorized/Middle.png" hOffset="32" vOffset="32"/>
			<image name="baseMiddle1" src="images/Colorized/Middle.png" hOffset="64" vOffset="32"/>
			<image name="baseMiddle2" src="images/Colorized/Middle.png" hOffset="96" vOffset="32"/>
			<image name="baseMiddle3" src="images/Colorized/Middle.png" hOffset="128" vOffset="32"/>
			<image name="baseMiddle4" src="images/Colorized/Middle.png" hOffset="160" vOffset="32"/>
			<image name="baseMiddleRight" src="images/Colorized/Middle Right.png" vOffset="32" hAlign="right"/>
			<image name="baseBottomLeft" src="images/Colorized/Bottom Left.png" vAlign="bottom"/>
			<image name="baseBottomMiddle" src="images/Colorized/Bottom Middle.png" hOffset="32" vAlign="bottom"/>
			<image name="baseBottomMiddle1" src="images/Colorized/Bottom Middle.png" hOffset="64" vAlign="bottom"/>
			<image name="baseBottomMiddle2" src="images/Colorized/Bottom Middle.png" hOffset="96" vAlign="bottom"/>
			<image name="baseBottomMiddle3" src="images/Colorized/Bottom Middle.png" hOffset="128" vAlign="bottom"/>
			<image name="baseBottomMiddle4" src="images/Colorized/Bottom Middle.png" hOffset="160" vAlign="bottom"/>
			<image name="baseBottomRight" src="images/Colorized/Bottom Right.png" hAlign="right" vAlign="bottom"/>
		<name>main_window</name>
		<title>Cadline</title>
		<height>80</height>
		<width>200</width>
		<visible>true</visible>
 
		<bgColor>#CCCCCC</bgColor>
		<text>
			<name>myText</name>
			<color>#FFFFFF</color>
			<size>18</size>
			<font>Verdana</font>
			<alignment>center</alignment>
			<vOffset>40</vOffset>
			<hOffset>100</hOffset>
		</text>
		<text>
			<name>Donnees</name>
			<color>#FFFFFF</color>
			<size>18</size>
			<font>Verdana</font>
			<alignment>center</alignment>
			<vOffset>50</vOffset>
			<hOffset>100</hOffset>
		</text>
	</window>
 
	<!-- Preference -->
	<preference>
		<name>textColorPref</name>
		<title>Couleur du texte :</title>
		<type>color</type>
		<defaultValue>#FFFFFF</defaultValue>
		<description>Selectionner une couleur de texte.</description>
	</preference>
 
 
	<!-- timer -->
	<timer>
		<name>timer</name>
		<interval>1</interval>
		<ticking>true</ticking>
		<onTimerFired>
		<![CDATA[
		<!--var cpuLoad = system.cpu.activity;
		myText.data = cpuLoad + "% CPU load";
		if ( cpuLoad < 40 )
		{
		myText.opacity = 102;
		}
		else
		{
		myText.opacity = cpuLoad * 2.55;
		}-->
		]]>
		</onTimerFired>
	</timer>
 
	<!-- Action -->
 
 
	<action trigger="onLoad">
	<![CDATA[
			include( "main.js" );
		]]>
 
	</action>
 
	<action trigger="onPreferencesChanged">
		updateBehavior();
	</action>

j'ai défini une zone de texte comme dans l'exemple "hello world" de yahoo Widget mais mes données ne se retournent pas, elles ne s'affichent pas dans le widget.

<text>
<name>Donnees</name>
<color>#FFFFFF</color>
<size>18</size>
<font>Verdana</font>
<alignment>center</alignment>
<vOffset>50</vOffset>
<hOffset>100</hOffset>
</text>

pourtant dans la fonction retourajax, j'ai bien 'bouclé' chaque champ et rempli donnees.data.